Redux-form中为field设置默认值initialvalue

尝试了很多种方法想要为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));

 

成功运行之后的图片如下:直接可以将参数显示出来,而不用自己再手动输入了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值