React中实现多按钮点击保持边框样式切换（支持多选与取消）的方法

问题的核心在于:focus和:active是浏览器原生的临时状态——:active只在点击按下时生效，:focus会在元素失去焦点时（比如点击其他元素）失效，所以没法实现你要的持久多选/切换效果。我们需要用自定义CSS类+组件状态来手动控制按钮的选中样式，具体修改步骤如下：

1. 修改CSS样式，替换伪类为自定义选中类 #

把原来依赖伪类的样式改成自定义的.selected类，这样我们可以通过组件状态来控制这个类的添加/移除：

button {
  margin: 5px;
  width: 44px;
  height: 32px;
  background-color: white;
  border: 1px solid silver;
  border-radius: 15%;
  /* 可选：添加过渡动画让状态切换更平滑 */
  transition: border-color 0.2s ease;
}

/* 替换原来的:active/:focus为自定义类 */
button.selected {
  border: 1px solid black;
}

2. 在JSX中动态绑定选中类 #

给每个按钮添加动态className，判断当前按钮的value是否在selectedItemSize数组中，来决定是否添加.selected类：

<div className="sizes">
  <div className="HorizontalLine" />
  <span>사이즈</span>
  <div className="sizeLists">
    {/* 遍历生成按钮更简洁，当然你也可以手动写每个按钮 */}
    {['230','235','240','245','250','255','260','265','270','275','280'].map(size => (
      <button
        key={size}
        onClick={this.updateSize}
        value={size}
        className={this.state.selectedItemSize.includes(size) ? 'selected' : ''}
      >
        {size}
      </button>
    ))}
  </div>
  <div className="HorizontalLine" />
</div>

3. 补充组件初始化逻辑（避免刷新页面丢失状态） #

为了让页面刷新后，选中状态能从URL参数中恢复，需要在组件挂载时初始化selectedItemSize状态：

componentDidMount() {
  const { location } = this.props;
  const url = new URLSearchParams(location.search);
  this.setState({ selectedItemSize: url.getAll('size') });
}

4. 优化updateSize方法（可选） #

你的updateSize逻辑已经没问题，但可以稍微简化一下，让代码更清晰：

updateSize = e => {
  const { history, location } = this.props;
  const name = e.currentTarget.value;
  const url = new URLSearchParams(location.search);
  const isSizeExist = url.getAll('size').includes(name);

  if (isSizeExist) {
    // 移除已选中的尺寸
    const filteredSizes = url.getAll('size').filter(size => size !== name);
    url.delete('size');
    filteredSizes.forEach(size => url.append('size', size));
  } else {
    // 添加新选中的尺寸
    url.append('size', name);
  }

  // 更新URL和状态
  const queryString = url.toString();
  history.push(`/products${queryString ? `?${queryString}` : ''}`);
  this.setState({ selectedItemSize: url.getAll('size') });
};

这样修改后，每个按钮点击时会切换自身的选中状态，多个按钮可以同时保持选中样式，再次点击会恢复原始边框，同时URL参数也会同步更新，刷新页面后状态也不会丢失。

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