CODEWITHSUNDEEP
reactjsreact-final-formfinal-form
user10288182
user10288182

Reputation:

How to rest or empty input field in react?

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 enter image description here

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

Upvotes: 0

Views: 1126

Answers (2)

Sahil Gupta
Sahil Gupta

Reputation: 461

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)}

Upvotes: 0

Kazi Hasan Ali
Kazi Hasan Ali

Reputation: 306

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

Upvotes: 2

Related Questions