如何使用纯React创建RadioButtonGroup并解决单选状态异常问题

问题根因 #

单选框无法互斥选中的核心原因是同组单选按钮的name属性值不统一。浏览器原生单选框的互斥逻辑完全依赖name属性分组：所有name相同的type="radio"输入框会被识别为同一组，同一时间仅允许一个处于选中状态。你当前给每个radio设置了不同的name，相当于每一个都是独立分组，自然会出现点击多个都保持选中的问题，和是否添加checked属性无关。

无需手动添加checked属性的实现方案 #

你不需要为每个按钮单独设置checked属性，仅需要将同组所有radio的name属性修改为同一个值，浏览器就会自动处理互斥选中逻辑，符合你要求的实现代码如下：

const handleAgeGroupOnChange = (e) => {
  console.log(e.target.value)
};

<div onChange={handleAgeGroupOnChange} className="flex flex-col">
  <label>
    <input type="radio" value="18-34" name="ageGroup" />
    18-34
  </label>
  <label>
    <input type="radio" value="35-49" name="ageGroup" />
    35-49
  </label>
  <label>
    <input type="radio" value="50+" name="ageGroup" />
    50+
  </label>
  <label>
    <input type="radio" value="all" name="ageGroup" />
    Mix all ages
  </label>
</div>

这种非受控组件的实现方式不需要额外维护选中状态，完全满足你的交互需求。

可选：受控组件实现（需要动态控制选中状态时使用） #

如果你需要设置默认选中值、或者后续要通过代码动态修改选中项，才需要使用受控组件写法绑定checked属性，可通过数组遍历避免逐个手动添加checked属性：

import { useState } from 'react';

// 统一维护单选组选项
const ageOptions = [
  { value: '18-34', label: '18-34' },
  { value: '35-49', label: '35-49' },
  { value: '50+', label: '50+' },
  { value: 'all', label: 'Mix all ages' },
]

function AgeGroupSelector() {
  // 定义选中状态，可设置默认值
  const [selectedAge, setSelectedAge] = useState('all');

  const handleAgeGroupOnChange = (e) => {
    setSelectedAge(e.target.value);
    console.log(e.target.value);
  };

  return (
    <div onChange={handleAgeGroupOnChange} className="flex flex-col">
      {ageOptions.map(option => (
        <label key={option.value}>
          <input
            type="radio"
            value={option.value}
            name="ageGroup"
            checked={selectedAge === option.value}
          />
          {option.label}
        </label>
      ))}
    </div>
  )
}

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