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

Question

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

重现此错误的步骤

选中复选框

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

取消选中该复选框

再次选中该复选框。文本保留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

在输入字段中使用值道具

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

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

Answer 2

添加此(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)}