MUI ToggleButton选中项点击后未高亮问题求助

问题根源 #

你的代码存在两个关键问题导致高亮异常：

1. onChange参数使用错误：MUI的ToggleButtonGroup组件onChange回调的正确签名是(event, newValue) => void，第二个参数newValue才是选中按钮对应的value值。你直接取e.target.value会得到字符串类型的"true"/"false"，而非预期的布尔值。
2. 值类型不匹配：formData.isFinal是布尔类型，但通过e.target.value赋值后会变成字符串类型。后续ToggleButtonGroup的value（字符串）和ToggleButton的value（布尔值）无法匹配，导致切换后没有选项能触发高亮。

修正代码 #

只需修改ToggleButtonGroup的onChange回调，使用newValue作为参数传递给changeData：

<ToggleButtonGroup
  color="primary"
  exclusive
  value={formData.isFinal}
  onChange={(e, newValue) => changeData(newValue, 'isFinal')}
  aria-label="Platform"
>
  <ToggleButton value={true}>Final</ToggleButton>
  <ToggleButton value={false}>Not Final</ToggleButton>
</ToggleButtonGroup>

原理说明 #

newValue会直接返回对应ToggleButton设置的布尔值（true/false），和formData.isFinal的类型完全匹配，这样ToggleButtonGroup就能正确识别选中状态，保持高亮效果。

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