React：ToggleButtonGroup添加defaultChecked无效，如何设置默认选中与边框？

你遇到的问题是因为ToggleButtonGroup在传入value和onSelect时处于受控组件模式，这时候defaultValue、defaultChecked这类非受控属性不会生效——受控组件的选中状态完全由你传入的value（也就是plotType）决定。

解决步骤： #

• 初始化plotType状态时设置好默认值，这个值必须是METROLOGY_TYPE_SHOW_PLOT[metrologyType]数组中存在的某个key
• 确保handlePlot函数能正确更新plotType的状态

修正后的代码示例： #

假设你用的是函数组件，先初始化状态：

// 初始化时设置默认的plotType，比如取数组第一个元素作为默认值
const [plotType, setPlotType] = useState(METROLOGY_TYPE_SHOW_PLOT[metrologyType][0]);

const handlePlot = (value) => {
  setPlotType(value);
};

然后组件部分保持原有结构即可，不需要额外加defaultValue或defaultChecked：

<ToggleButtonGroup name='plotType' value={plotType} type="radio" onSelect={handlePlot} vertical={false} >
  {METROLOGY_TYPE_SHOW_PLOT[metrologyType].map((key, index) => (
    <OverlayTrigger
      key={index}
      placement="right"
      overlay={<Tooltip id="button-tooltip-2">{key}</Tooltip>}
    >
      <ToggleButton 
        id={key} 
        value={key}
        variant="link"
        size='sm'
      > 
        <img alt={key} src={getIconUrl(key)}/>
      </ToggleButton>
    </OverlayTrigger>
  ))}
</ToggleButtonGroup>

这样初始化后，plotType的默认值对应的ToggleButton就会自动显示选中的边框样式，后续点击其他按钮也能通过handlePlot更新状态切换选中项。

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