React中Modifier Group分组单选按钮跨组互斥的问题排查

问题根源 #

你现在的代码里，所有单选按钮的name都是modifierSelected，浏览器会自动把相同name的单选框归为同一组，导致跨组只能选一个；同时只用了单个变量radioButton存储选中ID，没法分别记录不同修饰符组的选择状态。

修复步骤 #

1. 重构状态存储 #

把单个状态变量改成对象，用来分别记录每个修饰符组的选中项：

// 初始化空对象，键为修饰符组ID，值为对应组选中的modifier ID
const [selectedModifiers, setSelectedModifiers] = useState({});

2. 调整单选框的核心属性和逻辑 #

修改单选框的name、id以及状态更新逻辑，让同组内互斥、跨组独立：

{modifierGroups.map((modifierGroup) => {
  return (
    <div key={modifierGroup.id} className="bg-red-200">
      <label>{modifierGroup.name}</label>
      {modifierGroup.modifiers.map((modifier, modifierIndex) => {
        // 给每个组的单选框设置唯一name，确保同组互斥
        const groupRadioName = `modifier-group-${modifierGroup.id}`;
        // 判断当前选项是否为该组的选中项
        const isChecked = selectedModifiers[modifierGroup.id] === modifier.id;
        // 生成唯一ID，避免不同组的label和input关联错误
        const uniqueInputId = `${modifierGroup.id}-${modifierIndex}`;

        return (
          <div key={modifier.id}>
            <input
              type="radio"
              name={groupRadioName}
              id={uniqueInputId}
              onChange={() => {
                // 更新状态时，仅修改当前组的选中项
                setSelectedModifiers(prevState => ({
                  ...prevState,
                  [modifierGroup.id]: modifier.id
                }));
              }}
              value={modifier.id}
              checked={isChecked}
            />
            <label htmlFor={uniqueInputId}>{modifier.type}</label>
          </div>
        );
      })}
    </div>
  );
})}

关键修改说明 #

• name属性：用modifierGroup.id拼接成唯一的name，让每个修饰符组的单选框自成一组，互不干扰
• 状态管理：通过对象存储每个组的选中状态，确保不同组的选择独立保存
• ID属性：拼接组ID和选项索引生成唯一ID，避免不同组内的input和label关联混乱

这样修改后，每个修饰符组内只能选中一个选项，不同组之间的选择完全独立，符合你的需求。

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