如何构建仅允许单选的React按钮并将选中项存入状态

需求说明 #

需要创建一组自定义按钮，点击时将选中项存入React状态，且始终仅允许选中一项（不使用原生radio输入以获得更强的样式控制权），当前代码存在可多选问题，需实现点击新按钮时替换原有选中项，确保状态中始终只有一个选中项。

修改后的完整代码 #

import React from "react";
import { useState } from "react";
import "./styles.css";

const items = [
  { id: 1, text: "Easy and Fast" },
  { id: 2, text: "Easy and Cheap" },
  { id: 3, text: "Cheap and Fast" }
];

const App = () => {
  // 状态改为存储单个选中的id，初始为null表示未选中
  const [selectedTaskId, setSelectedTaskId] = useState(null);

  const handleTaskClick = (item) => {
    // 直接将状态设置为当前点击项的id，替换原有值
    setSelectedTaskId(item.id);
  };

  // 判断当前项是否被选中
  const isTaskChosen = (item) => {
    return selectedTaskId === item.id;
  };

  return (
    <div className="App">
      {items.map((item) => (
        <li key={item.id}>
          <label>
            <button
              type="button"
              className={isTaskChosen(item) ? "chosen" : ""}
              onClick={() => handleTaskClick(item)}
            />
            <span>{item.text}</span>
          </label>
        </li>
      ))}
    </div>
  );
};

export default App;

关键改动说明 #

• 状态类型调整：将原有的数组状态task改为单个值selectedTaskId，因为单选场景只需要存储当前选中项的id，初始值设为null表示未选中状态。
• 点击事件逻辑修正：handleTaskClick函数直接将状态设置为当前点击项的id，而非追加到数组，这样每次点击都会替换原有选中项，实现单选效果。
• 选中状态判断修复：原代码中chosenTask函数的判断逻辑错误（因为状态存储的是id而非对象，无法通过v.id判断），修改后直接对比selectedTaskId和当前项的item.id，正确识别选中状态。
• 移除冗余事件：按钮不需要onChange事件，仅保留onClick即可触发选中逻辑。

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