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的链接。

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中初始化表单后，才能订阅字段更改

1 个答案: