我尝试运行示例代码。
<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事件时,param值返回一个Proxy而不是一个带有输入值的对象。
//Console.log output
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: Event, type: "submit"…}
答案 0 :(得分:5)
您应该将其包装到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>
);
}
答案 1 :(得分:2)
尝试this.props.handleSubmit(values => console.log("========>", values))
而不是values => console.log("========>", values)
答案 2 :(得分:0)
对于使用redux的用户,请确保将onSubmit
映射到表单组件,而不是映射到handleSubmit
。
你可能会问什么不同?
handleSubmit
是一个带有redux形式的内置道具,它注入你用redux-form reduxForm()
包裹你的vanilla反应形式。在此处阅读更多相关信息:https://redux-form.com/7.2.3/docs/api/props.md/
onSubmit
是在完成验证后将调用的道具,yada yada。基本上确保您通过onSubmit
而不是handleSubmit
将自定义业务逻辑传递给组件,否则您将获得这个神秘的Proxy对象,并且会混淆一段时间。