如何为React表格特定行的元素绑定onchange事件

出现跨行列输入框同步联动的异常，是两处逻辑设计错位导致的：

• 所有表格行的同列输入框，value都绑定了组件全局state中的同一个字段（例如所有行的姓名输入框都绑定this.state.firstname），只要这个全局值更新，所有行的同列输入框都会同步刷新内容
• 输入框的禁用状态判断，使用全局的this.state.edit标记而非每行独立的编辑状态，所以点击任意一行的编辑按钮，所有行的输入框都会同步切换为可编辑状态

• 将单行编辑的相关字段从全局state中移除，所有可编辑值直接归属到对应行的用户数据对象上
• 把编辑状态下沉到行级，不再用全局的edit字段控制所有行的输入框禁用状态
• 输入框的onChange事件仅修改当前行的对应字段，不触发全局无差别更新

1. 精简构造函数中的全局state，删除跨行共享的冗余字段：

this.state = {
  users: [],
  error: false,
  // 删除冗余字段：firstname、lastname、phone、email、verification、role、edit
}

2. 重写编辑按钮的触发方法，仅切换匹配行自身的编辑状态，不修改全局状态：

editbtn = (targetUser) => {
  this.setState(prevState => ({
    users: prevState.users.map(user => {
      if (user.user_id === targetUser.user_id) {
        // 仅给匹配的行切换edit属性
        return {
          ...user,
          edit: !user.edit
        }
      }
      // 其他行的状态保持原样，不做联动修改
      return user
    })
  }))
}

3. 重写表格行的输入框绑定逻辑，所有属性关联当前行数据：

// 以姓名列输入框为例
<input
  value={data.user_firstname}
  onChange={(e) => {
    // 仅更新当前行的目标字段
    this.setState(prevState => ({
      users: prevState.users.map(user => {
        if (user.user_id === data.user_id) {
          return {
            ...user,
            user_firstname: e.target.value
          }
        }
        return user
      })
    }))
  }}
  disabled={!data.edit} // 用当前行的edit属性判断禁用状态
/>

4. 调整编辑按钮的文案判断逻辑，使用当前行的edit属性：

<button onClick={() => this.editbtn(data)}>
  {data.edit ? "Cancel" : "edit"}
</button>

• 必须实现行级状态绑定，每一行的输入值、编辑开关都要挂载在当前行的用户数据对象上，不能依赖组件全局的公共字段
• onChange事件触发后，仅更新匹配行的目标字段，不要无差别修改全局state的公共值，避免出现非预期的跨元素联动

内容的提问来源于stack exchange，提问作者Suraj Pawar