Redux Forms - 忽略没有注册字段的 initialValues

Question

我从服务器获取了一个对象，其中包含许多与当前表单不相关的字段。我想将整个对象传递到我的表单上的 initialValues，但是当我提交时，我不想让额外的字段通过。

这是一个简单的表格：

const MyForm = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    <Field name="name" component="input" placeholder="Name" />
    <button type="submit">Submit</button>
  </form>
);

export default reduxForm({
  form: "foo",
  onSubmit: values => {
    console.log(values);
  },
})(MyForm);

在它的父组件中，它是这样呈现的：

<MyForm initialValues={{ name: "bob", other: "thing" }} />

当我提交表单时，我希望值看起来像：

{name: "bob"}

并且不包括额外的 other 字段。这可能吗？

由于最终用户看不到额外的字段，因此它们不应成为表单最终补丁请求的一部分。我也不希望我的父组件与表单紧密耦合，所以我不想在该级别过滤字段。

Answer 1

我们最终通过用高阶组件包装表单来解决这个问题。然后，您可以包装传入的提交处理程序，并在表单返回的值发送到提交处理程序之前对它们执行一些逻辑：

export function specialForm(WrappedForm) {

  return class extends Component {
    submissionFilter(submitFunction) {
      return function(values, dispatch, props) {
        // Only let registered fields through.
        if (props.registeredFields) {
          values = _.pick(values, Object.keys(props.registeredFields));
        }

        return submitHandler(values, dispatch, props)
      }
    }

    render() {
      var submitHandler = this.props.onSubmit;
      if (submitHandler) {
        submitHandler = this.submissionFilter(submitHandler);
      }
      return <WrappedForm {...this.props} onSubmit={submitHandler} />;
    }
  };
}

这项工作的关键是表单的道具作为第三个参数传递给提交处理程序，道具有一个名为 registeredFields 的属性，它是表单本身的字段。

Redux Forms - 忽略没有注册字段的 initialValues

Redux Forms - Ignore initialValues with no registered field

reactjs

redux

react-redux

mobx-react-form