如何仅在表单在react final表单中初始化后才订阅字段更改

Question

我有一个react-final-form表单，它需要从状态初始化。当其中一个字段发生更改时，我希望将表单重置为初始值(空(。因此，我使用对字段脏状态的订阅，如果它发生变化，我使用OnChange重置表单：

<Field name="option" subscription={{ dirty: true }}>
{({ input: { onChange } }) => (
<OnChange name="option">
{value => {
form.reset({
...initialValues,
option: value
});
}}
</OnChange>
)}
</Field>

但它不起作用，因为表单在初始化后会立即重置。有没有办法把这两件事分开？这样，只有当用户修改了表单的字段时，我才能重置表单？

这是我的代码沙盒的链接。

Answer 1

它不起作用，因为<Field />组件至少需要第一次渲染，因为它的目的是渲染字段UI而不是挂钩回调。我建议您使用<FormSpy />，因为它打算挂接回调，即使它可能很难用于特定字段

<FormSpy
subscription={{ dirtyFields: true }}
onChange={props => {
if (props.dirtyFields.option) {
form.reset({
...initialValues,
option:
form.getFieldState("option") &&
form.getFieldState("option").value
});
}
}}
/>

代码沙箱

FormSpy