React中如何获取.map遍历生成的默认选中radio单选框的option值

你现有代码存在两个核心问题会导致取值异常：

1. 初始状态和选中状态不一致：你给第一个单选框设置了默认选中，但对应的optionData初始值是空对象，首次渲染完成后没有触发点击事件的前提下，optionData和实际选中的项不匹配。
2. 所有单选框的id完全重复，不符合HTML规范，会导致后续关联label等操作失效。

正确实现方案 #

不需要操作原生DOM，直接通过React状态管理就能拿到当前选中值，改造步骤如下：

1. 给状态设置初始值，和第一个默认选中的选项对齐：

// 首次渲染直接取第一个选项作为初始选中值
const [optionData, setOptionData] = useState(variant.options[0] || {});

2. 改造radio组件的属性，把onClick换成更符合表单语义的onChange，同时修正重复id问题：

{variant.options.map((option, index) => (
  <input
    type="radio"
    name="variant-select"
    id={`variant-select-${index}`} // 保证id唯一
    className="focus:ring-0 focus:ring-offset-0 focus:text-red-600 text-red-600 border-none -mt-1 cursor-pointer z-10"
    defaultChecked={index === 0}
    value={index}
    onChange={() => setOptionData(option)}
  />
))}

3. 要获取当前选中的option值的时候，直接读取optionData即可，比如提交表单时直接用这个状态变量就行。

如果后续需要支持手动修改选中项、联动其他组件等需求，建议改成完全受控组件，把defaultChecked换成受控的checked属性，单独维护选中索引的状态：

// 新增选中索引的状态，初始值为0对应第一个选项
const [selectedIndex, setSelectedIndex] = useState(0);
const [optionData, setOptionData] = useState(variant.options[0] || {});

// 选中时同步更新两个状态
const handleSelect = (option, index) => {
  setSelectedIndex(index);
  setOptionData(option);
}

// 渲染部分
{variant.options.map((option, index) => (
  <input
    type="radio"
    name="variant-select"
    id={`variant-select-${index}`}
    className="focus:ring-0 focus:ring-offset-0 focus:text-red-600 text-red-600 border-none -mt-1 cursor-pointer z-10"
    checked={index === selectedIndex} // 受控绑定选中状态
    value={index}
    onChange={() => handleSelect(option, index)}
  />
))}

这种方式后续要重置选中、或者从外部修改选中项时，直接修改selectedIndex即可，灵活度更高。

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