如何在map循环中实现同值可取消选中单选框功能？

问题根源是原生单选框通过name属性分组，同name且同value的单选框会共享选中状态；同时原逻辑用单个变量管理选中值，无法区分不同行的单选框。

解决方案步骤： #

• 给循环的每一项分配唯一标识（比如后端返回的ID，或循环的index），用来区分不同行。
• 用对象/数组存储每个行的独立选中状态，替代原来的单个变量。
• 给每个单选框设置唯一的name属性，避免原生分组逻辑干扰。
• 修改 onChange 逻辑，仅更新当前行的选中状态。

示例代码： #

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

// 模拟循环数据，每行有唯一ID，业务值相同
const rowData = [
  { id: "row_1", value: "same_value", label: "第一行选项" },
  { id: "row_2", value: "same_value", label: "第二行选项" },
  { id: "row_3", value: "same_value", label: "第三行选项" }
];

export default function App() {
  // 用对象存储每行的选中状态：key=行ID，value=选中值/undefined（未选中）
  const [rowCheckedState, setRowCheckedState] = useState({});

  const handleRadioToggle = (rowId, targetValue) => {
    setRowCheckedState(prevState => ({
      ...prevState,
      // 切换当前行的选中状态：已选中则取消，未选中则选中
      [rowId]: prevState[rowId] === targetValue ? undefined : targetValue
    }));
  };

  return (
    <div className="App">
      {rowData.map(row => (
        <label key={row.id} style={{ display: "block", margin: "8px 0" }}>
          <input
            type="radio"
            // 给每个单选框设置唯一name，避免原生分组干扰
            name={`radio_group_${row.id}`}
            value={row.value}
            // 受控绑定当前行的选中状态
            checked={rowCheckedState[row.id] === row.value}
            onChange={() => handleRadioToggle(row.id, row.value)}
          />
          {row.label}
        </label>
      ))}
    </div>
  );
}

关键说明： #

1. 唯一name：每个单选框的name带上行ID，确保原生逻辑不会把不同行的单选框归为一组。
2. 独立状态存储：rowCheckedState对象精准记录每行的选中状态，不同行之间完全隔离。
3. 切换逻辑：点击时仅操作当前行的状态，实现“再次点击取消选中”的同时，不会影响其他行的同值单选框。

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