如何实现按钮列表单元素onClick选中显示红色边框、再点取消

• 出现点击任意按钮全列表同步加边框的问题，本质是选中状态的设计逻辑偏差：多数人会设置一个全局布尔值（如isSelect）标记是否有按钮被选中，渲染时只要这个值为真，就给列表内所有按钮统一绑定边框类名，没有单独识别被点击的具体按钮，自然触发全量样式变化。

• 调整状态设计：不再用全局布尔值做选中标记，改为存储当前被选中按钮的唯一标识（如按钮绑定的业务ID、列表渲染的索引值），初始值设置为null。
• 重构点击事件逻辑：给每个按钮绑定点击事件时，把当前按钮的唯一标识传入处理函数：
  • 如果传入的按钮标识和已存储的选中标识一致，说明是重复点击同一个按钮，直接把存储的选中标识重置为null，触发边框消失；
  • 如果标识不一致，就把存储的选中标识更新为当前传入的按钮标识。
• 调整样式渲染判断：遍历渲染按钮列表时，逐个校验当前按钮的标识是否和存储的选中标识匹配，匹配才给当前按钮加上红色边框的类名，不匹配则使用默认无框样式。

核心逻辑示例代码（以React为例）：

// 定义选中状态，初始为null
const [selectedId, setSelectedId] = useState(null)

// 按钮点击处理函数
const handleSelectBtn = (currentId) => {
  // 匹配则清空，不匹配则更新
  setSelectedId(prev => prev === currentId ? null : currentId)
}

// 渲染按钮列表
<div className="button-group">
  {buttonList.map(btn => (
    <button
      key={btn.id}
      onClick={() => handleSelectBtn(btn.id)}
      // 单按钮判断是否加边框
      className={selectedId === btn.id ? 'red-border' : ''}
    >
      {btn.name}
    </button>
  ))}
</div>

• 常见避坑提醒：不要把选中类名绑定在按钮列表的公共父容器上，否则只要选中状态生效，所有子按钮都会继承对应样式，回到之前全量加框的问题。

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