如何使用Radio按钮结合默认选项数组设置组件默认值？

1. 初始化Map状态 #

在组件初始化useState时，基于defaultOptions数组为每组Radio设置默认选中值。假设你有3组Radio，分别对应group1、group2、group3，可以这样初始化：

import { useState } from 'react';

const defaultOptions = [
  { label: "Mark", value: "mark" },
  { label: "Steve", value: "steve" },
  { label: "Paul", value: "paul" }
];

const YourComponent = () => {
  // 初始化Map，为每组Radio指定默认选中的value
  const [radioStates, setRadioStates] = useState<Map<string, string>>(
    new Map([
      ["group1", defaultOptions[0].value], // 第一组默认选Mark
      ["group2", defaultOptions[1].value], // 第二组默认选Steve
      ["group3", defaultOptions[2].value]  // 第三组默认选Paul
    ])
  );

  // ...后续代码
};

如果需要所有组默认选中同一个选项（比如都选Mark），只需把所有group的初始值设为defaultOptions[0].value即可。

2. 渲染Radio按钮并绑定状态 #

遍历defaultOptions生成每组Radio的选项，通过radioStates.get(groupKey)判断当前选项是否被选中，同时绑定 onChange 事件更新Map状态：

// 渲染第一组Radio
<div className="radio-group">
  {defaultOptions.map(option => (
    <label key={option.value} className="radio-label">
      <input
        type="radio"
        name="group1"
        value={option.value}
        // 对比Map中当前组的value，判断是否选中
        checked={radioStates.get("group1") === option.value}
        onChange={(e) => {
          // 创建新Map实例更新状态，避免直接修改原Map导致React不渲染
          const newRadioStates = new Map(radioStates);
          newRadioStates.set("group1", e.target.value);
          setRadioStates(newRadioStates);
        }}
      />
      {option.label}
    </label>
  ))}
</div>

// 同理渲染第二组、第三组，只需把groupKey换成"group2"、"group3"，name属性对应修改
<div className="radio-group">
  {defaultOptions.map(option => (
    <label key={option.value} className="radio-label">
      <input
        type="radio"
        name="group2"
        value={option.value}
        checked={radioStates.get("group2") === option.value}
        onChange={(e) => {
          const newRadioStates = new Map(radioStates);
          newRadioStates.set("group2", e.target.value);
          setRadioStates(newRadioStates);
        }}
      />
      {option.label}
    </label>
  ))}
</div>

关键注意点 #

• 由于Map是引用类型，更新状态时必须创建新的Map实例（不能直接修改原Map），否则React无法检测到状态变化，不会触发组件重新渲染。
• Radio的name属性必须同组保持一致，确保同一时间只能选中组内一个选项。

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