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

Question

我有一个react-final-form表单，需要从状态初始化。当其中一个字段发生变化时，我想将表单重置为初始（空）值。所以我使用订阅字段的 dirty 状态，如果它发生变化，我使用 OnChange 来重置表单：

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

但这不起作用，因为表单在初始化后会立即重置。有什么办法可以分开这两个事件吗？这样我就可以仅在表单的字段已被用户修改时重置表单？

这是我 codesandbox 的 link。

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

codesandbox

FormSpy

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

How to subscribe to field changes only after the form has been initialized in react-final-form

reactjs

final-form

react-final-form