[英]Simple Redux-Form Component returns undefined
刚创建此表单作为教程的一部分。 但是,每当我提交表单时,控制台日志都会给我undefined
的信息。 我究竟做错了什么?
import React, {Component} from 'react';
import { reduxForm } from 'redux-form';
class Signin extends Component {
handleFormSubmit({email, password}) {
console.log(email); // this gives me 'undefined'
}
render() {
const {handleSubmit, fields: {email, password}} = this.props;
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Email:</label>
<input {...email} className="form-control" />
</fieldset>
<fieldset className="form-group">
<label>Password:</label>
<input {...password} className="form-control" />
</fieldset>
<button action="submit" className="btn btn-primary">Sign in</button>
</form>
);
}
}
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
})(Signin);
这是由于对redux-form的更新。
与其从this.props
导入{email, password}
的值,我们而是使用从redux-form导入的Field
组件。
import { Field, reduxForm } from 'redux-form';
然后使用它代替input
标签:
<fieldset className="form-group">
<label>Email:</label>
<Field
name="email"
className="form-control"
component="input"
type="text"
placeholder="Email"
/>
</fieldset>
现在,此输入与redux-form的连接来自name
属性,而不是从this.props
中提取出来。
重要说明:名称必须与字段中的名称相同:[] reduxForm中定义的数组:
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
})(Signin);
在此基础上,如果要自定义Field使用的组件,则可以轻松定义自己的自定义组件。
您可以定义一个函数,而不是为Field的component属性提供一个字符串:
<div className="form-group">
<label>Last name:</label>
<Field type="text" className="form-control" placeholder="Smith" name="lastName"
component={textField} />
</div>
textField是从另一个文件import {textField} from '../../redux_form_elements';
: import {textField} from '../../redux_form_elements';
而textField如下:
import React from 'react';
export const textField = (field) => (
<div>
<input className="form-control" {...field.input} type={field.type} placeholder={field.placeholder} />
{field.meta.touched && field.meta.error &&
<label id="basic-error" className="validation-error-label">This field is required.</label>
}
</div>
);
看起来像Grider教程。 我使用可接收字段的renderInput函数以这种方式修复了该问题。 不知道这是否对您有用。
import React, {Component} from 'react';
import { reduxForm } from 'redux-form';
import { Field } from 'redux-form';
const renderInput = field => (
<div>
<input {...field.input} type={field.type} className="form-control" />
{field.meta.touched && field.meta.error}
<span>{field.meta.error}</span>
</div>
);
class Signin extends Component {
handleFormSubmit({email, password}) {
console.log(email);
console.log("Hi");
}
render() {
const {handleSubmit, fields: {email, password}} = this.props;
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Email</label>
<Field
name="email"
component={renderInput}
type="text" />
</fieldset>
<fieldset className="form-group">
<label>Password</label>
<Field
name="password"
component={renderInput}
type="text" />
</fieldset>
<button action="submit" className="btn btn-primary">Sign in</button>
</form>
);
}
}
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
})(Signin);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.