2

我有一个从服务器获取的对象，其中包含许多与当前表单无关的字段。我想将整个对象传递给表单上的 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字段。这可能吗？

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

4

1 回答 1

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

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

于 2019-02-20T06:13:03.723 回答