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

Question

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

重现此错误的步骤

选中复选框

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

取消选中复选框

再次检查 checkbox.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 props，其中放置一个像

这样的状态

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

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

How to rest or empty input field in react?

reactjs

final-form

react-final-form