如何为React多Toggle Button添加互斥自动关闭功能？

完全可以基于现有代码改造实现互斥自动关闭功能，以下是具体实现思路、代码及优化方案：

实现思路 #

核心逻辑调整为：每次点击按钮时，将所有按钮的选中状态置为false，再将当前点击的按钮状态设为true；如果需要支持“再次点击已选中按钮取消选中”的场景，则额外判断当前按钮是否已选中，若已选中则将所有状态置为false。

修改后的完整代码 #

基础互斥（必须保持一个选中） #

import { useState } from 'react';

const ToggleGroup = () => {
  const [selected, setSelected] = useState({
    "a": false,
    "b": false,
    "c": false,
    "d": false,
    "e": false,
  });

  const select = (e) => {
    const targetKey = e.target.value;
    // 创建新对象，所有状态置为false，仅当前按钮设为true
    const newSelected = Object.fromEntries(
      Object.keys(selected).map(key => [key, key === targetKey])
    );
    setSelected(newSelected);
  };

  return (
    <div>
      <button onClick={select} className={selected["a"] ? "style selected" : "style"} value="a">a</button>
      <button onClick={select} className={selected["b"] ? "style selected" : "style"} value="b">b</button>
      <button onClick={select} className={selected["c"] ? "style selected" : "style"} value="c">c</button>
      <button onClick={select} className={selected["d"] ? "style selected" : "style"} value="d">d</button>
      <button onClick={select} className={selected["e"] ? "style selected" : "style"} value="e">e</button>
    </div>
  );
};

export default ToggleGroup;

支持取消选中的互斥（可全部未选中） #

如果需要点击已选中的按钮时取消其选中状态，修改select函数即可：

const select = (e) => {
  const targetKey = e.target.value;
  // 判断当前按钮是否已选中
  const isCurrentlySelected = selected[targetKey];
  // 已选中则全部置为false，否则仅当前按钮置为true
  const newSelected = Object.fromEntries(
    Object.keys(selected).map(key => [key, !isCurrentlySelected && key === targetKey])
  );
  setSelected(newSelected);
};

优化方案 #

1. 简化状态管理：不需要用对象存储所有按钮状态，直接用单个变量存储当前选中的按钮key（初始值设为null表示未选中），代码更简洁：

const [selectedKey, setSelectedKey] = useState(null);

const select = (e) => {
  const targetKey = e.target.value;
  // 点击已选中的则取消，否则切换为当前按钮
  setSelectedKey(selectedKey === targetKey ? null : targetKey);
};

按钮的className可以简化为：

className={`style ${selectedKey === "a" ? "selected" : ""}`}

2. 循环渲染按钮：避免重复写按钮代码，维护更方便：

const buttonKeys = ["a", "b", "c", "d", "e"];

// 渲染部分
<div>
  {buttonKeys.map(key => (
    <button
      key={key}
      onClick={select}
      className={`style ${selectedKey === key ? "selected" : ""}`}
      value={key}
    >
      {key}
    </button>
  ))}
</div>

3. 提取className逻辑：可以封装成函数或使用模板字符串简化，避免重复判断：

const getButtonClass = (key) => `style ${selectedKey === key ? "selected" : ""}`;

// 按钮中使用
className={getButtonClass(key)}

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