清除输入时字段的值 以最终形式清除

Question

我正在使用带有react-final-form的自定义组件。在输入更改时，它将值设置为address字段。但是，当输入被清除时，它不会更新字段的值。所以我正在尝试使用表单突变器来做到这一点。

我已经添加了一个突变器来清除字段：

mutators={{
clear: ([address], state, { changeValue }) => {
changeValue(state, "address", () => undefined);
}
}}

我试图将其添加到我的自定义 onChange 函数中，但它不起作用。

onChange={event =>
props.input.onChange !== undefined
? props.input.onChange({ value: event })
: form.mutators.clear
}

或者也许这可以在没有突变器的情况下完成？我真的很感激你的帮助。这是一个实时示例(清除该字段仅适用于按钮单击作为onClick={form.mutators.clear}(。

Answer 1

您可以随时调用form.change('address', undefined)以清除该值。

Answer 2

所有默认回调都由组件处理。如果您想通过单击按钮进行清除，则可以创建自定义组件并使用本机回调方法完成您的操作。

onChange = (event) => {
this.setState({
address:event.target.value
});
}
onClear = () => {
this.setState({
address:''
});
}

<div>
<Field name="address">
<div>
<input
value={this.state.address}
onChange={this.onChange}
/>
</div>
</Field>
<button onClick={this.onClear}>Clear</button>
</div>

Answer 3

问题不在于您的代码中的 react-final-form，而在于 react-da 数据，我在 1 天内围绕您的代码玩了很多，并且检查 reset 与 react-final-form 一起工作得很好

只需使用此代码更新渲染，即可看到重置工作正常。是的！问题出在 React DA 数据上。由于此软件包的官方信息较少，我不确定它的作用。

<div className="App">
<h2>Dadata test</h2>
<Form
mutators={{
clear: ([address], state, { changeValue }) => {
changeValue(state, "address", () => undefined);
}
}}
onSubmit={onSubmit}
render={({ form, handleSubmit, pristine, invalid, values, errors }) => (
<form onSubmit={handleSubmit} noValidate>
<Field name="address" component="input" />
{/* {props => (
<div>
<ReactDadata
token="d19c6d0b94e64b21d8168f9659f64f7b8c1acd1f"
onChange={event =>
props.input.onChange !== undefined
? props.input.onChange({ value: event })
: form.mutators.clear
}
/>
</div>
)}
</Field> */}
<button type="submit" disabled={invalid}>
Submit
</button>
<button type="button" onClick={form.reset}>
Clear
</button>
<Fields names={["address"]}>
{fieldsState => (
<pre>{JSON.stringify(fieldsState, undefined, 2)}</pre>
)}
</Fields>
</form>
)}
/>
</div>

希望它能帮助您解决问题。