尝试了很多种方法想要为field添加默认值,刚开始先使用了placeholder,但是并不能直接编辑,只能起到提示信息的作用,后来终于找到了解决办法,如下:
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import * as actions from '../../actions/users';
const form = reduxForm({
form: 'UserEdit',
validate
});
const renderField = ({ input, type, placeholder, value, label, meta: { touched, error } }) => (
<div className={`input-group ${touched && error ? 'has-error' : ''}`}>
<input type={type} placeholder={placeholder} value={value} label={label} {...input} />
{ touched && error && <div className="error">{error}</div> }
</div>
);
class UserEdit extends Component {
componentDidMount() {
this.handleInitialize();
}
handleInitialize() {
const initData = {
//这里可以改为你想要设置的值,前面的键值如“id”要和你Field中的name值相同,
//我这里调用的是前一个页面传过来的值
"id": this.props.params.id,
"firstname": this.props.params.firstname,
"lastname": this.props.params.lastname,
"email": this.props.params.email,
};
this.props.initialize(initData);
}
handleFormSubmit(formProps) {
// 这里的editUser是自己定义的一个action,这里实现的是编辑功能
this.props.editUser(formProps);
}
deleteUserSubmit(idx) {
// 这里的deleteUser是你自己定义的一个action,这里实现的是删除功能
this.props.deleteUser(idx);
}
renderUsers(){
const { handleSubmit } = this.props;
return (
<div className="edituser">
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<h3>
<label>Id:</label>
<Field name="id" type="text" component={renderField} readOnly = "true"/>
<label>First Name:</label>
<Field name="firstname" type="text" component={renderField}/>
<label>Last Name:</label>
<Field name="lastname" type="text" component={renderField}/>
<label>Email:</label>
<Field name="email" component={renderField} type="text" />
</h3>
{
// 提交编辑事件
}
<button action="submit" className="user-add-bottom">Save changes</button>
{
// 将删除事件绑定到button上
}
<button type="butthon" className="user-add-bottom" onClick={handleSubmit(this.deleteUserSubmit.bind(this))}>Delete</button>
</form>
</div>
)
}
render() {
return (
<div className="content users">
<h1>User Detail</h1>
{ this.renderUsers() }
</div>
)
}
}
//校验
function validate(formProps) {
const errors = {};
const fields = ['formProps.firstname', 'formProps.lastname', 'formProps.email'];
if (!formProps.firstname) {
errors.firstname = 'Please enter a first name';
}
if (!formProps.lastname) {
errors.lastname = 'Please enter a last name';
}
if (!formProps.email) {
errors.email = 'Please enter an email';
}
if (formProps.firstname&& formProps.firstname.length < 3) {
errors.firstname = 'minimum of 4 characters';
}
if (formProps.firstname&& formProps.firstname > 20) {
errors.firstname = "maximum of 20 characters";
}
if (formProps.lastname&& formProps.lastname < 3) {
errors.firstname = "minimum of 4 characters";
}
if (formProps.lastname&& formProps.lastname > 20) {
errors.firstname = "maximum of 20 characters";
}
if(formProps.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(formProps.email)) {
errors.email = "please provide valid email";
}
return errors;
}
function mapStateToProps(state) {
return {
user: state.user
};
}
export default connect(mapStateToProps, actions)(form(UserEdit));
成功运行之后的图片如下:直接可以将参数显示出来,而不用自己再手动输入了。