Redux-form中handleSubmit问题：提交获Proxy Event而非表单值

你遇到的核心问题是混淆了redux-form提供的handleSubmit高阶函数和你自己的提交处理逻辑，导致提交时拿到的是事件对象而非表单值。

为什么会出现这个问题？ #

redux-form的handleSubmit是由高阶组件自动注入到组件props中的，它的核心作用是：

• 拦截表单的默认提交事件
• 收集所有Field组件对应的表单值
• 将整理好的表单值传递给你提供的自定义提交函数

但在你的代码中，你通过mapDispatchToProps定义了一个同名的handleSubmit函数，这直接覆盖了redux-form注入的原生handleSubmit。当表单提交时，调用的是你自己写的函数，它接收的是浏览器的Proxy Event对象，而非redux-form收集的表单值。

修正后的代码示例 #

我们需要把自定义的提交逻辑和redux-form的handleSubmit分离开：

1. 调整mapDispatchToProps，定义独立的提交处理函数

const mapDispatchToProps = dispatch => ({
  // 自定义提交函数，接收redux-form传递的表单值
  onNoteSubmit: note => {
    console.log(note); // 现在这里拿到的就是表单的values了
    // dispatch(addNote(note)); // 你的实际提交逻辑
  }
});

2. 在组件中用redux-form的handleSubmit包裹自定义函数

修改Form的onSubmit属性，让redux-form先处理表单收集值，再传递给你的函数：

class NoteForm extends Component {
  state = { tags: [] };

  handleAddItem = (e, {value}) => {
    this.setState({ 
      tags: [{text: value, value}, ...this.state.tags], 
    });
  };

  render() {
    // 用redux-form注入的handleSubmit包裹自定义提交函数
    const submitHandler = this.props.handleSubmit(this.props.onNoteSubmit);

    return (
      <Form onSubmit={submitHandler}>
        <Field name='description' component={TextAreaField} maxLength='5' label='Description'/>
        <Field name='tags' onAddItem={this.handleAddItem} component={DropdownField} label='Tags'/>
        <Form.Field control={Button} primary className='submit-btn' type='submit'>
          Submit Note
        </Form.Field>
      </Form>
    );
  }
}

// 注意：这里不要覆盖redux-form的handleSubmit
export default reduxForm({form: 'noteForm', validate})(connect(null, mapDispatchToProps)(NoteForm));

另一种写法：组件内部定义提交函数 #

如果你更倾向于把提交逻辑写在组件内部，可以这样做：

class NoteForm extends Component {
  state = { tags: [] };

  handleAddItem = (e, {value}) => {
    this.setState({ 
      tags: [{text: value, value}, ...this.state.tags], 
    });
  };

  // 组件内部的提交处理函数
  handleSubmitForm = (note) => {
    console.log(note);
    this.props.dispatch(addNote(note)); // 直接用connect注入的dispatch
  };

  render() {
    return (
      <Form onSubmit={this.props.handleSubmit(this.handleSubmitForm)}>
        {/* ...字段内容不变 */}
      </Form>
    );
  }
}

// 这里可以只注入dispatch，不用自定义mapDispatchToProps
export default reduxForm({form: 'noteForm', validate})(connect()(NoteForm));

关键要点总结 #

• 永远不要覆盖redux-form注入的handleSubmit，它是连接表单和你的提交逻辑的桥梁
• 必须用this.props.handleSubmit(yourSubmitFunction)的方式，让redux-form负责收集表单值并传递给你的函数
• 自定义提交函数的第一个参数就是redux-form整理好的表单values对象

内容的提问来源于stack exchange，提问作者Miguel Stevens