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

偏执的太偏执、 2022-06-08 00:08 194阅读 0赞

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

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

![Center][]

[Center]: /images/20220608/5344543f46334a13a198309736708bbc.png