Redux:维护表单状态的正确做法是什么?

ReactJS + Redux: What's the proper and correct practice to maintain state for a form?

本文关键字：是什么 维护 表单 状态 Redux      更新时间：2023-09-26

在ReactJS + Redux中，使用Material-UI的TextField, http://www.material-ui.com/#/components/text-field，我目前有一个表单，用户填写firstName, lastName, birthMonth, birthDay, birthYear。

我有以下内容，它都可以工作，但看起来非常多余，特别是对于出生日期，例如，对于每个输入都有操作，并且每次更改都更新它:

组件InputComponent.js中:

  updateFirstName(event) {
    this.props.actions.updateFirstName(event.target.value)
  }
  updateLastName(event) {
    this.props.actions.updateLastName(event.target.value)
  }
  updateBirthMonth(event) {
    this.props.actions.updateBirthMonth(event.target.value)
  }
  updateBirthDay(event) {
    this.props.actions.updateBirthDay(event.target.value)
  }
  updateBirthYear(event) {
    this.props.actions.updateBirthYear(event.target.value)
  }
  <TextField
    hintText="Enter First Name"
    onChange={this.updateFirstName}
    value={this.props.userInfo.firstName}
  />
  <TextField
    hintText="Enter Last Name"
    onChange={this.updateLastName}
    value={this.props.userInfo.lastName}
  />
  <TextField
    hintText="Enter Birth Month"
    onChange={this.updateBirthMonth}
    value={this.props.userInfo.birthMonth}
  />
  <TextField
    hintText="Enter Birth Day"
    onChange={this.updateBirthDay}
    value={this.props.userInfo.birthDay}
  />
  <TextField
    hintText="Enter Birth Year"
    onChange={this.updateBirthYear}
    value={this.props.userInfo.birthYear}
  />

对于我的行为:

  updateFirstName(eventValue) {
    return {
      type: 'UPDATE_FIRST_NAME',
      firstName: eventValue
    }
  },
  updateLastName(eventValue) {
    return {
      type: 'UPDATE_LAST_NAME',
      lastName: eventValue
    }
  },
  updateBirthMonth(eventValue) {
    return {
      type: 'UPDATE_BIRTH_MONTH',
      birthMonth: eventValue
    }
  },
  updateBirthDay(eventValue) {
    return {
      type: 'UPDATE_BIRTH_DAY',
      birthDay: eventValue
    }
  },
  updateBirthYear(eventValue) {
    return {
      type: 'UPDATE_BIRTH_YEAR',
      birthYear: eventValue
    }
  },

然后在我的减速机，userReducer.js:

const userReducer = function(userInfo = {}, action){
  switch(action.type){
    case 'UPDATE_FIRST_NAME':
      return {
        ...userInfo,
        firstName: action.firstName
      }
    case 'UPDATE_LAST_NAME':
      return {
        ...userInfo,
        lastName: action.lastName
      }
    case 'UPDATE_BIRTH_MONTH':
      return {
        ...userInfo,
        birthMonth: action.birthMonth
      }
    case 'UPDATE_BIRTH_DAY':
      return {
        ...userInfo,
        birthDay: action.birthDay
      }
    case 'UPDATE_BIRTH_YEAR':
      return {
        ...userInfo,
        birthYear: action.birthyear
      }
    default:
      return userInfo
  }
}
export default userReducer

对于ReactJS + Redux，是否有更好，更适当和有效的实践来处理输入形式?

提前感谢!

事先警告，我是React的新手，我只是想提供一个思路，太大了，不能作为评论添加。如果这是一个失败，我将删除答案…

可以将所有的更新功能合并到单个updateUserInfo中吗?

// Component
<TextField name="firstName" onChange={this.updateUserInfo} ... />
<TextField name="lastName" onChange={this.updateUserInfo} ... />
updateUserInfo(event) {
  this.props.actions.updateUserInfo(event.target.name, event.target.value);
}
// Action
updateUserInfo(eventProperty, eventValue) {
    return {
      type: 'UPDATE_USER_INFO',
      property: eventProperty,
      value: eventValue
    };
}
// Reducer
const userReducer = function(userInfo = {}, action){
  switch(action.type){
    case 'UPDATE_USER_INFO':
      var returnObj = {
        ...userInfo
      };
      returnObj[action.property] = action.value;
      return returnObj;
  }
}

备选动作和减速器:

// Action
updateUserInfo(eventProperty, eventValue) {
    var updatedData = {};
    updatedData[eventProperty] = eventValue;
    return {
      type: 'UPDATE_USER_INFO',
      data: updatedData
    };
}
// Reducer
const userReducer = function(userInfo = {}, action){
  switch(action.type){
    case 'UPDATE_USER_INFO':
      return {
        ...userInfo,
        ...action.data
      };
  }
}

我强烈建议您查看redux-form。

你的表单将是这样的(从这里的例子):

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
class ContactForm extends Component {
  render() {
    const {fields: {firstName, lastName, email}, handleSubmit} = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <input type="text" placeholder="First Name" {...firstName}/>
        </div>
        <div>
          <label>Last Name</label>
          <input type="text" placeholder="Last Name" {...lastName}/>
        </div>
        <div>
          <label>Email</label>
          <input type="email" placeholder="Email" {...email}/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}
ContactForm = reduxForm({ // <----- THIS IS THE IMPORTANT PART!
  form: 'contact',                           // a unique name for this form
  fields: ['firstName', 'lastName', 'email'] // all the fields in your form
})(ContactForm);
export default ContactForm;
相关文章：