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>

但是，当我处理onSubmit事件时，参数值返回一个代理服务器而不是带有输入值的对象。

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

答

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

代替values => console.log("========>", values)

答

你应该把它包装成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> 
    ); 
}

答

对于那些使用redux的人，请确保您将onSubmit映射到您的表单组件，而不是映射到handleSubmit。

你可能会问什么区别？

handleSubmit是在redux形式建立的道具，它注入与包装你的香草反应形式与REDX形式reduxForm()。了解更多关于在这里：https://redux-form.com/7.2.3/docs/api/props.md/

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

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

相关推荐