为何自定义Radio Button组件在name值不同时允许多选？

问题现象 #

我有一个可复用的单选按钮组件，当所有选项的name属性值相同时，组件能正常实现单选效果：

const drinks = [
  {
    label: "Coffee",
    name: "a"
  },
  {
    label: "Tea",
    name: "a"
  },
  {
    label: "Water",
    name: "a",
    disabled: true
  }
];

但如果每个选项的name属性值不同，组件就会失去单选特性，用户可以同时选中多个选项：

const drinks = [
  {
    label: "Coffee",
    name: "1"
  },
  {
    label: "Tea",
    name: "2"
  },
  {
    label: "Water",
    name: "3",
    disabled: true
  }
];

问题根源 #

原生HTML中，单选按钮的分组完全依赖于相同的name属性值——浏览器会把name相同的单选框归为一组，同一组内只能选中一个。如果每个单选框的name不同，浏览器会将它们视为独立的分组，自然允许同时选中。

解决方案 #

重构组件设计，将分组的name作为单选组（Radio Group）的统一属性，每个选项仅通过value来区分，而不是用name。这样既保证了分组的统一性，又能区分不同选项：

重构后的组件示例 #

// 定义选项类型
type RadioOption = {
  label: string;
  value: string | number;
  disabled?: boolean;
};

// 单选组组件属性
type RadioGroupProps = {
  name: string;
  options: RadioOption[];
  selectedValue: string | number;
  onChange: (value: string | number) => void;
};

// 单选组组件实现
const RadioGroup = ({ name, options, selectedValue, onChange }: RadioGroupProps) => {
  return (
    <div>
      {options.map((option) => (
        <label key={option.value} style={{ marginRight: '1rem' }}>
          <input
            type="radio"
            name={name}
            value={option.value}
            disabled={option.disabled}
            checked={selectedValue === option.value}
            onChange={() => onChange(option.value)}
          />
          {option.label}
        </label>
      ))}
    </div>
  );
};

// 使用示例
const drinks = [
  {
    label: "Coffee",
    value: "1"
  },
  {
    label: "Tea",
    value: "2"
  },
  {
    label: "Water",
    value: "3",
    disabled: true
  }
];

// 父组件中使用
const App = () => {
  const [selectedDrink, setSelectedDrink] = useState<string | number>("1");

  return (
    <RadioGroup
      name="drinks"
      options={drinks}
      selectedValue={selectedDrink}
      onChange={setSelectedDrink}
    />
  );
};

核心改进点 #

• 将分组的name统一由RadioGroup组件控制，确保同组所有单选按钮使用相同的name，让浏览器正确识别为单选分组。
• 用value属性区分不同选项，替代原来的name属性，既保留选项的唯一性标识，又不破坏分组逻辑。
• 通过父组件的状态管理配合checked属性，精准控制选中状态，实现可靠的单选交互。

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