如何为Ant Design中基于数组动态生成的单选按钮组设置指定选项默认选中

嘿，我来帮你搞定这个默认选中的需求！首先得提醒你一下，你代码里的checked="true"其实是多余的——Ant Design的Radio.Group是受控组件，它的选中状态是通过value属性来控制的，不是checked哦。

要设置特定元素默认选中，只需要两步：

1. 给选中状态设置正确的初始值 #

假设你用React Hooks管理状态，那初始化selectedCategory的时候，直接把它设为你想要默认选中的那个选项的value值就行。比如你想默认选中uniqueRadioElements里value为"dermatology"的选项，那状态初始化就写成这样：

const [selectedCategory, setSelectedCategory] = useState("dermatology");

注意：这个初始值必须和uniqueRadioElements数组中对应选项的value完全一致，不然匹配不上就不会默认选中啦。

2. 修正Radio.Group的属性 #

把你原来代码里的checked="true"删掉，因为这个属性对Radio.Group不生效。修改后的Radio.Group代码应该是这样的：

<Radio.Group 
  options={uniqueRadioElements} 
  onChange={onCategorySelect} 
  value={selectedCategory} 
  optionType="button" 
  buttonStyle="solid" 
  className="select-category" 
/>

额外检查点 #

最后再确认下你的uniqueRadioElements数组格式是否符合要求，每个选项需要包含value和label字段，比如：

const uniqueRadioElements = [
  { label: "皮肤科", value: "dermatology" },
  { label: "内科", value: "internal" },
  // 其他选项...
];

这样调整之后，你指定的那个选项就会在页面加载时自动默认选中啦！

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