Redux-form如何通过onSubmit事件修改字段实现表单联动

首先纠正一个逻辑偏差：你需要的「修改Partner字段值时自动清空Account」是实时字段联动效果，不应该绑定在onSubmit事件上——onSubmit只有点击提交按钮时才会触发，无法做到选完Partner立刻清空Account的即时交互。如果确实有提交时清空的特殊需求，文末会补充对应写法。

实时联动的标准实现 #

Redux-form 注入的change方法支持手动修改任意表单字段值，配合Field组件的onChange回调就能实现联动，步骤如下：

• 从组件props中解构出redux-form自动注入的change方法，该方法调用格式为change(字段名, 新值)
• 给Partner字段绑定自定义onChange处理函数，注意函数内要先执行默认的字段值更新逻辑，否则Partner本身的选中值不会正常存入表单状态
• 在处理函数内调用change方法，将Account字段的值重置为空（多选组件空值一般用空数组[]，单选组件用null，根据你用的MultiSelect组件要求调整即可）

修改后的完整代码参考：

// 组件内先解构需要的props
const { handleSubmit, change, submitting, pristine, sortedAccounts, accountsLoaded } = props;

// Partner字段变更处理函数
const handlePartnerChange = (newVal, oldVal, defaultOnChange) => {
  // 执行默认更新逻辑，保证Partner值正常存储
  defaultOnChange(newVal);
  // 清空Account已选内容
  change(FORM_FILTER_NAMES.ACCOUNT, []);
};

return (
  <form onSubmit={handleSubmit}>
    <BoxBlock>
      <Row>
        <Col md={3}>
          <Field
            name={FORM_FILTER_NAMES.PARTNER}
            label="Partner"
            placeholder="Choose a partner"
            onChange={handlePartnerChange}
          />
        </Col>
        <Col md={3}>
          <Field
            component={MultiSelect}
            name={FORM_FILTER_NAMES.ACCOUNT}
            label="Account"
            options={sortedAccounts}
            placeholderOption="Choose account"
            loaded={accountsLoaded}
            isSearchable
          />
        </Col>
      </Row>
      <div className="d-flex justify-content-between">
        <Button
          className="pull-right"
          bsStyle="primary"
          type="submit"
          disabled={submitting || pristine}
        >
          Filter
        </Button>
      </div>
    </BoxBlock>
  </form>
)

如果确实需要在onSubmit时清空Account #

如果你的需求是提交表单时才清空Account字段，直接在提交处理函数内调用change即可：

const handleFormSubmit = (values, dispatch, props) => {
  // 原有提交逻辑，比如接口请求、参数处理等
  // ...
  // 提交完成后清空Account字段
  props.change(FORM_FILTER_NAMES.ACCOUNT, []);
};

// 表单绑定的时候用自定义的提交函数
<form onSubmit={handleSubmit(handleFormSubmit)}>

内容的提问来源于stack exchange，提问作者Vitalii Shevtsov