React JS中如何给指定索引的表格行添加required属性

问题根源 #

你使用了全局单一布尔状态isRequiredNewCheckDate控制所有表格行的日期必填属性，所有行的输入框都绑定了同一个状态值，只要状态修改就会全局生效，自然会出现勾选一行所有行都同步生效的问题。同时你原有代码还有两处冗余问题：

• handleChange中勾选和取消勾选的执行逻辑完全一致，没必要做if/else判断
• setState不返回Promise，使用await不会生效，属于无效写法

修复步骤 #

1. 调整状态结构 #

用对象存储每行id对应的必填状态，对象的键为行id，值为布尔值标记该行是否需要必填：

// 状态初始定义修改为
state = {
  // 保留其他原有状态...
  requiredDateRows: {}
}

2. 重写复选框事件处理函数 #

仅修改当前操作id对应的状态值：

handleChange = (e, id) => {
  this.setState(prevState => ({
    requiredDateRows: {
      // 保留其他行的状态
      ...prevState.requiredDateRows,
      // 直接用当前复选框的选中状态赋值，无需额外取反
      [id]: e.target.checked
    }
  }))
}

3. 修改日期输入框的required属性绑定 #

根据当前行的id取对应状态值，用双感叹号将初始undefined转为布尔值false：

<td className="boder-gray">
    <input 
      type="date"  
      value={new_check_date == null ? "" : new_check_date} 
      name="checkDate" 
      // 仅需修改这一行属性绑定逻辑
      required={!!this.state.requiredDateRows[id]} 
      onChange={e => this.handleInputNewCheckDate(e, index, id,  check)} 
      className="form-control" 
    />
</td>

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