React中处理长列表复选框选中与取消选中，存储选中项至state的方案咨询

没问题，我来帮你搞定这个复选框的状态管理问题！咱先看看你现有代码的核心问题：所有复选框都绑定了同一个isGoing状态，这就导致点任何一个复选框，所有框都会同时选中或取消，完全没法单独控制每个选项的选中状态。

下面是调整后的解决方案，用数组来存储选中的选项值，同时支持选中和取消的逻辑：

步骤说明 #

• 初始化state：用一个数组selectedValues来保存所有选中的选项值
• 编写handleInputChange函数：判断当前点击的选项是否已在选中数组里，在的话就移除（取消选中），不在就添加（选中）
• 给每个复选框绑定对应的checked状态：通过判断当前选项值是否在selectedValues数组中来决定是否选中

完整代码示例 #

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化选中值数组为空
    this.state = {
      selectedValues: []
    };
    // 绑定this指向，避免函数调用时this丢失
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    const { value } = e.target;
    this.setState(prevState => {
      // 判断当前值是否已在选中数组中
      if (prevState.selectedValues.includes(value)) {
        // 如果存在，过滤掉该值（取消选中）
        return {
          selectedValues: prevState.selectedValues.filter(item => item !== value)
        };
      } else {
        // 如果不存在，添加该值（选中）
        return {
          selectedValues: [...prevState.selectedValues, value]
        };
      }
    });
  }

  render() {
    return (
      <div className='row float-center d-flex justify-content-center'>
        <label className='m-3'>
          <input
            name='1'
            type='checkbox'
            value='1'  {/* 这里要加上value属性，和name对应方便取值 */}
            checked={this.state.selectedValues.includes('1')}
            onChange={this.handleInputChange}
          /> 1
        </label>
        <label className='m-3'>
          <input
            name='1.5'
            type='checkbox'
            value='1.5'
            checked={this.state.selectedValues.includes('1.5')}
            onChange={this.handleInputChange}
          /> 1.5
        </label>
        {/* 可以继续添加更多复选框，逻辑完全一致 */}
      </div>
    );
  }
}

关键细节解释 #

• 每个复选框都加上了value属性，这样在handleInputChange里可以直接拿到当前选项的标识
• 使用setState的函数式更新（传入prevState），确保我们基于最新的状态进行修改，避免状态更新的异步问题
• 用includes方法判断选项是否被选中，用filter和扩展运算符来更新选中数组，逻辑清晰易懂

这样修改后，你就能单独控制每个复选框的选中状态，所有选中的项都会存在selectedValues数组里，取消选中时也会自动从数组中移除啦！

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