Redux-form returns OnSubmit 处理程序中的代理

Question

我尝试运行示例代码。

<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>

但是当我处理 onSubmit 事件时，参数值 returns 一个代理而不是一个具有输入值的对象。

//Console.log output
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: Event, type: "submit"…}

Answer 1

尝试this.props.handleSubmit(values => console.log("========>", values))

而不是values => console.log("========>", values)

Answer 2

你应该把它包装成 handleSubmit 函数（它由 redux-form 提供），像这样：

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

Answer 3

对于使用 redux 的用户，请确保将 onSubmit 映射到表单组件而不是映射到 handleSubmit.

您可能会问有什么不同？

handleSubmit 是 redux-form 中的一个内置 prop，它是在你用 redux-form reduxForm() 包装你的 vanilla react form 时注入的。在这里阅读更多相关信息：https://redux-form.com/7.2.3/docs/api/props.md/

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

Redux-form returns OnSubmit 处理程序中的代理

Redux-form returns Proxy in OnSubmit handler

redux

redux-form