我正在第一次使用 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));
如何处理提交的值,以便最终将它们发送到我的 API?
最佳答案
Redux-Form 使用 handleSubmit
装饰您的组件支柱。根据文档,它是:
a function meant to be passed to
<form onSubmit={handleSubmit}>
or to<button onClick={handleSubmit}>
. It will run validation, both sync and async, and, if the form is valid, it will callthis.props.onSubmit(data)
with the contents of the form data.Optionally, you may also pass your
onSubmit
function tohandleSubmit
which will take the place of theonSubmit
prop. For example:
因此,如果您的组件没有 onSubmit
您必须“手动”将提交处理程序传递给 handleSubmit
的属性功能。请尝试这个:
<form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
请不要混淆您的handleSubmit
具有从 Redux-Form 传递的同名 prop 的方法。
关于reactjs - 如何使用 redux-form 处理提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43966804/