reactjs - 如何在反应中休息或清空输入字段？

Question

我正在使用react-final-form库 .so ，其中有一个复选框，单击复选框时会显示 textfield 。用户可以在文本字段中输入文本。但如果您在文本字段中uncheck the checkbox保留文本。

重现此错误的步骤

选中复选框

在输入字段中输入“abc”文本

取消选中复选框

再次选中复选框。Textfied 保留abc文本。

<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

Answer 1

在输入字段中使用 value 道具，其中放置类似的状态

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

并在用户取消选中复选框时清除状态 valueForInput

Answer 2

在三元表达式中添加 this(values.app1 && values.app1.city?values.app1.city="":null)而不是 null。

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