如何在反应中休息或清空输入字段?
How to rest or empty input field in react?
我正在使用 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>;
在输入字段中使用 value props,其中放置一个像
这样的状态
<div>
<label>City</label>
<PrefixedField
name="city"
component="input"
type="text"
placeholder="City"
value = {this.state.valueForInput}
/>
</div>
并在用户取消选中复选框时清除状态 valueForInput
添加这个 (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)}
我正在使用 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>;
在输入字段中使用 value props,其中放置一个像
这样的状态<div>
<label>City</label>
<PrefixedField
name="city"
component="input"
type="text"
placeholder="City"
value = {this.state.valueForInput}
/>
</div>
并在用户取消选中复选框时清除状态 valueForInput
添加这个 (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)}