React类组件中如何用数组状态处理多个复选框的勾选与取消

你现在的问题在于所有复选框都绑定了同一个isGoing状态，这会导致所有复选框的选中状态完全同步，显然不符合多选的需求。咱们一步步来修正这个逻辑：

第一步：修正复选框的checked判断逻辑 #

每个复选框的选中状态应该由checkboxed数组来决定——如果当前复选框的name在数组里，就显示为选中，否则未选中。所以把每个checked属性改成：

checked={this.state.checkboxed.includes(对应name值)}

第二步：实现handleInputChange方法 #

这个方法需要完成两个核心逻辑：勾选时把值加入数组，取消勾选时把值从数组中移除。而且要注意不能直接修改原state数组，要遵循React的不可变更新原则。

首先记得在构造函数里绑定这个方法（或者用类字段箭头函数的方式）：

constructor(props) {
  super(props);
  this.state = { checkboxed: [] };
  // 绑定方法，确保this指向正确
  this.handleInputChange = this.handleInputChange.bind(this);
}

然后实现方法本身：

handleInputChange(e) {
  const { name, checked } = e.target;
  this.setState(prevState => {
    if (checked) {
      // 勾选时，避免重复添加
      if (!prevState.checkboxed.includes(name)) {
        return {
          checkboxed: [...prevState.checkboxed, name]
        };
      }
    } else {
      // 取消勾选时，过滤掉当前name
      return {
        checkboxed: prevState.checkboxed.filter(item => item !== name)
      };
    }
    // 无需修改时返回原状态
    return prevState;
  });
}

第三步：更新你的JSX代码 #

把每个复选框的checked属性替换成正确的判断，修改后的完整JSX部分如下：

<div className='row float-center d-flex justify-content-center'>
  <label className='m-3'>
    <input 
      name='1' 
      type='checkbox' 
      checked={this.state.checkboxed.includes('1')} 
      onChange={this.handleInputChange} 
    />
    1
  </label>
  <label className='m-3'>
    <input 
      name='1.5' 
      type='checkbox' 
      checked={this.state.checkboxed.includes('1.5')} 
      onChange={this.handleInputChange} 
    />
    1.5
  </label>
  <label className='m-3'>
    <input 
      name='2' 
      type='checkbox' 
      checked={this.state.checkboxed.includes('2')} 
      onChange={this.handleInputChange} 
    />
    2
  </label>
  <label className='m-3'>
    <input 
      name='2.5' 
      type='checkbox' 
      checked={this.state.checkboxed.includes('2.5')} 
      onChange={this.handleInputChange} 
    />
    2.5
  </label>
  <label className='m-3'>
    <input 
      name='3' 
      type='checkbox' 
      checked={this.state.checkboxed.includes('3')} 
      onChange={this.handleInputChange} 
    />
    3
  </label>
  <label className='m-3'>
    <input 
      name='3.5' 
      type='checkbox' 
      checked={this.state.checkboxed.includes('3.5')} 
      onChange={this.handleInputChange} 
    />
    3.5
  </label>
</div>

额外优化小建议 #

如果你的复选框数量很多，可以把选项数据抽成一个数组，然后用map来渲染，这样代码更简洁易维护：

// 先定义选项数组
const checkboxOptions = ['1', '1.5', '2', '2.5', '3', '3.5'];

// 在render中渲染
<div className='row float-center d-flex justify-content-center'>
  {checkboxOptions.map(option => (
    <label key={option} className='m-3'>
      <input 
        name={option} 
        type='checkbox' 
        checked={this.state.checkboxed.includes(option)} 
        onChange={this.handleInputChange} 
      />
      {option}
    </label>
  ))}
</div>

后续要加新选项，只需要修改checkboxOptions数组就行，不用重复写冗余的DOM代码~

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