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

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

密码箱

表单间谍