reactjs – 如何使用redux-form处理提交
您好我是第一次使用redux-form.我能够呈现表单,但我无法处理提交.虽然我最终想要将数据发送到服务器,但此时,我只是尝试控制日志表单字段值.我收到错误:
错误:您必须传递handleSubmit()一个onSubmit函数或传递onSubmit作为prop 这是我的Profile.jsx文件 import React,{Component} from 'react'; import {connect} from 'react-redux'; import {withAuth} from 'react-devise'; import { Field,reduxForm } from 'redux-form'; class Profile extends Component { handleSubmit(data) { console.log('Submission received!',data); } render() { const { handleSubmit } = this.props; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="firstName">First Name</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> ); } } // Decorate the form component Profile = reduxForm({ form: 'profile' // a unique name for this form })(Profile); const mapStateToProps = state => { return { currentUser: state.currentUser }; }; export default connect(mapStateToProps)(withAuth(Profile)); 任何redux-form专家都可以帮助指导我以正确的方式处理提交的值,以便最终将它们发送到我的API.谢谢 更新:工作代码: import React,data); } render() { return ( <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}> <div> <label htmlFor="firstName">First Name</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> ); } } // Decorate the form component Profile = reduxForm({ form: 'profile' // a unique name for this form })(Profile); const mapStateToProps = state => { return { currentUser: state.currentUser }; }; export default connect(mapStateToProps)(withAuth(Profile)); 解决方法
Redux-Form使用handleSubmit prop装饰您的组件.根据文档,它是:
因此,如果您的组件没有onSubmit属性,则必须“手动”将提交处理程序传递给handleSubmit函数.请试试这个: <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}> 请不要将handleSubmit方法与从Redux-Form传递的prop同名. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |