ReactJS中为多个点击按钮添加.active类的实现问询

嘿，我来帮你解决这个问题！你现在的需求是实现可切换的多选按钮：点击按钮时如果没选中就加上.active类并存入状态数组，再次点击就取消选中并移除数组里的值对吧？目前你的代码只做了添加操作，缺少取消和状态判断的逻辑，我来帮你完善：

第一步：修改状态更新逻辑 #

我们需要一个能切换选中状态的方法，而不是单纯添加。判断当前点击的district是否已经在selectedDistricts里：

• 如果已经存在，就把它从数组里过滤掉（取消选中）
• 如果不存在，就添加进去（选中）

第二步：给按钮动态加.active类 #

渲染按钮时，通过判断当前district是否在选中数组里，来决定要不要加.active类。另外，23个按钮一个个写太麻烦，用数组循环生成更高效。

完整的可运行代码 #

class DistrictModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedDistricts: []
    };
  }

  // 切换选中/取消选中状态
  toggleDistrict = (district) => {
    this.setState(prevState => {
      const isAlreadySelected = prevState.selectedDistricts.includes(district);
      return {
        selectedDistricts: isAlreadySelected
          ? // 已选中，过滤掉当前district
            prevState.selectedDistricts.filter(item => item !== district)
          : // 未选中，添加到数组
            [...prevState.selectedDistricts, district]
      };
    });
  };

  render() {
    // 生成1到23的district数组，不用手动写23个按钮
    const districts = Array.from({ length: 23 }, (_, idx) => (idx + 1).toString());

    return (
      <div className="list-group">
        {districts.map(district => (
          <button
            key={district}
            type="button"
            // 动态绑定类名：选中时加active
            className={`list-group-item list-group-item-action ${this.state.selectedDistricts.includes(district) ? 'active' : ''}`}
            onClick={() => this.toggleDistrict(district)}
          >
            {district}. bezirk
          </button>
        ))}
      </div>
    );
  }
}

几个关键细节解释 #

• 函数式setState：用prevState来获取最新的状态，避免React状态更新异步带来的问题，确保每次状态修改都是基于最新值。
• 动态类名：用模板字符串结合三元表达式，轻松实现选中时添加.active类，完美适配Bootstrap的list-group样式。
• 循环生成按钮：通过Array.from快速生成1到23的字符串数组，再用map渲染按钮，减少重复代码，后续要调整数量也只需要改数字就行。

这样改完之后，点击按钮就能切换激活状态，selectedDistricts数组也会实时同步选中的项，后续你直接用这个数组做后续处理就可以啦！

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