Redux表单在OnSubmit处理程序中返回代理

我尝试运行示例代码

<form onSubmit={values => console.log("========>", values)}>
    <div>
      <label htmlFor="firstName">First Nameeee</label>
      <Field name="firstName" component="Input" type="text"/>
    </div>
    <div>
      <label htmlFor="lastName">Last Name</label>
      <Field name="lastName" component="Input" type="text"/>
    </div>
    <div>
      <label htmlFor="email">Email</label>
      <Field name="email" component="Input" type="email"/>
    </div>
    <button type="submit">Submit</button>
  </form>

---

尝试

this.props.handleSubmit（值=>console.log（“====>”，值））

---

您应该将其包装到

handleSubmit

函数（由redux表单提供）中，而不是

values=>console.log（“=============>”，values）

，如下所示：

render() {
    return (
        <form onSubmit={this.props.handleSubmit(values => console.log("========>", values))}>
          <div>
            <label htmlFor="firstName">First Nameeee</label>
            <Field name="firstName" component="Input" type="text"/>
          </div>
          <div>
            <label htmlFor="lastName">Last Name</label>
            <Field name="lastName" component="Input" type="text"/>
          </div>
          <div>
            <label htmlFor="email">Email</label>
            <Field name="email" component="Input" type="email"/>
          </div>
        <button type="submit">Submit</button>
      </form>
    );
}

render（）{
返回(
console.log（“==========>”，值））}>
名字
姓
电子邮件
提交
);
}

对于使用redux的用户，请确保将Submit上的

映射到表单组件，而不是映射到
handleSubmit

你可能会问有什么不同

handleSubmit
是redux表单中的内置道具，您可以使用redux表单
reduxForm（）
包装您的表单。请在此处阅读更多信息：

onSubmit
是完成验证后将调用的道具，yada-yada。基本上，请确保您是通过
onSubmit
而不是通过
handleSubmit
将自定义业务逻辑传递给组件，否则您会得到这个神秘的代理对象，并在一段时间内感到困惑

render() {
    return (
        <form onSubmit={this.props.handleSubmit(values => console.log("========>", values))}>
          <div>
            <label htmlFor="firstName">First Nameeee</label>
            <Field name="firstName" component="Input" type="text"/>
          </div>
          <div>
            <label htmlFor="lastName">Last Name</label>
            <Field name="lastName" component="Input" type="text"/>
          </div>
          <div>
            <label htmlFor="email">Email</label>
            <Field name="email" component="Input" type="email"/>
          </div>
        <button type="submit">Submit</button>
      </form>
    );
}