[英]How to handleSubmit with a redux-form
I'm working to use redux-form for the first time.我正在努力第一次使用 redux-form。 I am able to render the form but I have not been able to handle the submit.
我能够呈现表单,但我无法处理提交。 While I eventually want to send the data to the server, at this point, I'm simply trying to console log the form field values.
虽然我最终想将数据发送到服务器,但此时,我只是尝试控制台记录表单字段值。 I'm getting the error:
我收到错误:
Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop
Here's my Profile.jsx file这是我的 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));
How can I handle the submitted values in a way where I can eventually send them to my API?我如何以最终可以将它们发送到我的 API 的方式处理提交的值?
Redux-Form decorates your component with handleSubmit
prop. Redux-Form 使用
handleSubmit
装饰您的组件。 According to docs it's:根据文档,它是:
a function meant to be passed to
<form onSubmit={handleSubmit}>
or to<button onClick={handleSubmit}>
.旨在传递给
<form onSubmit={handleSubmit}>
或<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.它将运行同步和异步验证,并且,如果表单有效,它将使用表单数据的内容调用
this.props.onSubmit(data)
。Optionally, you may also pass your
onSubmit
function tohandleSubmit
which will take the place of theonSubmit
prop.或者,您还可以将您的
onSubmit
函数传递给handleSubmit
,它将取代onSubmit
道具。 For example:例如:
So if your component doesn't have onSubmit
property you have to 'manually' pass your submit handler to handleSubmit
function.因此,如果您的组件没有
onSubmit
属性,您必须“手动”将提交处理程序传递给handleSubmit
函数。 Please try this:请试试这个:
<form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
Please don't confuse your handleSubmit
method with prop passed from Redux-Form with the same name.请不要将您的
handleSubmit
方法与从 Redux-Form 传递的同名道具混淆。
(Posted solution on behalf of the question author to move it to the answer space) . (代题作者贴出解答移至答案空间) 。
Working code:工作代码:
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() {
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));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.