React类组件中与Hook多表单状态更新语法等价的实现方式是什么

你的代码出现问题的核心原因有3个：

• 初始state中allValues被定义为字符串类型，无法存储多组键值对格式的表单数据
• changeHandler直接全量覆盖allValues的值，没有保留之前的字段内容
• 所有可编辑输入框的name属性重复、且value都绑定了同一个allValues变量，导致修改一个输入框所有输入框同步变更

具体修改步骤 #

1. 修正state初始定义 #

把allValues改为对象类型，用来存储多组表单键值对：

constructor(props) {
  super(props);
  // 把allValues的初始值从""改为{}
  this.state = { isDone: true, allValues: {} };
  this.medicineClose = this.medicineClose.bind(this);
}

2. 重写changeHandler逻辑 #

和函数组件的逻辑对齐，先展开原有allValues的内容，再更新对应字段的值，用函数式setState避免状态更新的时序问题：

changeHandler = (e) => {
  const { name, value } = e.target;
  this.setState(prevState => ({
    allValues: {
      ...prevState.allValues,
      [name]: value
    }
  }));
};

3. 修正输入框的name和value绑定 #

给每个可编辑输入框设置唯一的name属性，同时绑定对应字段的状态值：
比如第一个时间段的输入框修改为：

<input
  type="text"
  name="morning_before_food" // 每个输入框的name必须唯一
  style={styles.label}
  onChange={this.changeHandler}
  value={this.state.allValues.morning_before_food || ''} // 绑定对应name的状态
/>

第二个时间段的输入框对应修改为：

<input
  type="text"
  name="morning_after_food"
  style={styles.label}
  onChange={this.changeHandler}
  value={this.state.allValues.morning_after_food || ''}
/>

其余时间段的输入框按照这个规则依次修改name和value的绑定即可。

可选简化方案 #

由于你的代码中每个时间段是独立的表单，提交时已经通过FormData(e.currentTarget)获取当前表单的内容，如果不需要做实时表单校验、联动等逻辑，完全可以不用受控组件，直接删除所有输入框的onChange和value绑定，保留defaultValue即可，不需要维护全局的表单状态，代码更简洁。

内容的提问来源于stack exchange，提问作者vivek kn