How to rest or empty input field in react?

Question

I am using react-final-form library .so in which I have one checkbox , on click of checkbox it shows textfield . User can enter text in text field .but if you uncheck the checkbox text retain in textfield .

Steps to reproduce this bug

Checked the check box

Enter “abc” text in input field

Unchecked the checkbox

Again checked the checkbox.Textfied retain abc text.

<FieldPrefix prefix="app1">
  <div>
    <label>
      app1
      <PrefixedField name="appStatus" component="input" type="checkbox" />
    </label>
  </div>
  {values.app1 && values.app1.appStatus ? (
    <div>
      <label>City</label>
      <PrefixedField
        name="city"
        component="input"
        type="text"
        placeholder="City"
      />
    </div>
  ) : null}
</FieldPrefix>;

https://codesandbox.io/s/optimistic-field-56zpm

https://github.com/final-form/react-final-form

Firstly pick value for textbox from a state variable and hook onChange event for textbox and change state accordingly. When you reset it just update the state variable to an empty string and you will see it clean. — Dinesh Kumar
– Dinesh Kumar, Commented Aug 2, 2019 at 5:31

Kazi Hasan Ali · Accepted Answer · 2019-08-02 05:31:50Z

2

use value props in the input field where put a state like

<div>
    <label>City</label>
    <PrefixedField
    name="city"
    component="input"
    type="text"
    placeholder="City"
    value = {this.state.valueForInput}
    />
</div>

and clear the state valueForInput when user uncheck the check box

answered Aug 2, 2019 at 5:31

Kazi Hasan Ali

2964 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user10288182 Over a year ago

please use react final form api

Kazi Hasan Ali Over a year ago

well why ? can you elaborate it !

Kazi Hasan Ali Over a year ago

yeah but they do have a value props where you use it

user10288182 Over a year ago

I think there is no need to add create state unnecessary ..react final form do for us

Kazi Hasan Ali Over a year ago

actually they will also do the same process using a state , as react render will never update unless you update a state

|

Sahil Gupta · Accepted Answer · 2019-08-02 05:54:38Z

0

Add this (values.app1 && values.app1.city?values.app1.city="":null) instead of the null in the ternary expression.

{values.app1 && values.app1.appStatus ? (
                <div>
                  <label>City</label>
                  <PrefixedField
                    name="city"
                    component="input"
                    type="text"
                    placeholder="City"
                  />
                </div>
              ) : (values.app1 && values.app1.city?values.app1.city="":null)}

answered Aug 2, 2019 at 5:54

Sahil Gupta

4615 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to rest or empty input field in react?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related