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));

成功運行之後的圖片如下：直接可以將參數顯示出來，而不用自己再手動輸入了。