最终表格重置特定字段值

Question

我有两个 Field 组件，一个 Parent 和一个 Child。由于 Child 依赖于 Parent，我想在 Parent 更新时重置 Child。

我试过这个：

           <Field name="parent">
              {(props) => {
                return (
                  <Parent
                    onChange={(newValue) => {
                      props.input.onChange(newValue);
                      form.change('child', undefined);
                      form.resetFieldState('child');
                    }}
                    value={props.input.value}
                  />
                );
              }}
            </Field>
           <Field name="child">
              {(props) => {
                return (
                  <Child
                   value={props.input.value} // the value is not updated here,
                   onChange={props.input.onChange}
                  />
                );
              }}
            </Field>

但它似乎不起作用。正确的做法是什么？

Answer 1

您可以使用表单装饰器实现此目的，例如，拥有一个包含两个字段 firstName 和 lastName 的表单，以便在 firstName 更改时重置 lastName可以：

<Form
      onSubmit={onSubmit}
      initialValues={{ stooge: "larry", employed: false }}
      decorators={[
        (formApi) => {
          let before = formApi.getState();
          const unsubscribe = formApi.subscribe(
            (state) => {
              if (before.values.firstName !== state.values.firstName) {
                formApi.change("lastName", "");
              }
              before = state;
            },
            { values: true }
          );
          return unsubscribe;
        }
      ]}>...</Form>

在上面的例子中，我们订阅了表单状态的变化，并将字段值与之前的值进行比较，当它发生变化时，重新设置另一个。这是一个codesandbox https://codesandbox.io/s/so-final-form-reset-specific-field-value-drvr4l?file=/index.js:593-619

哦，顺便说一句，这里有 ready-made 包：https://github.com/final-form/final-form-calculate

最终表格重置特定字段值

Final Form reset specific field value

react-final-form

final-form