React+TypeScript中如何指定Radio单选框的onChange事件类型

问题原因 #

你遇到的类型不匹配是因为你使用的Material UI FormControlLabel 组件的onChange回调签名和原生输入框不同：它会传入两个参数，第一个是事件对象，第二个是布尔值表示当前单选框的选中状态，且默认事件对象的泛型没有绑定到HTMLInputElement，所以你原本为原生输入框写的类型定义无法匹配。

解决方案 #

方案1：修改事件回调的类型定义，适配FormControlLabel的签名 #

直接调整handleChange的参数类型，补充第二个checked参数，同时明确事件对象的泛型：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
  // 示例逻辑：获取选中的单选框value
  const selectedValue = event.target.value;
  // 你的业务逻辑
};

这个方案不需要调整组件调用代码，直接适配FormControlLabel的事件规则即可。

方案2：把onChange绑定到内部的Radio组件上 #

如果你不想改原有的handleChange类型定义，可以把回调绑到Radio组件上，而非外层的FormControlLabel：

<FormControlLabel
 value="radio1"
 control={<Radio onChange={handleChange} />}
 label=" radio1"
/>
<FormControlLabel
 value="radio2"
 control={<Radio onChange={handleChange} />}
 label="radio2"
/>

Radio组件的onChange签名和原生文本输入框完全一致，你之前写的(event: React.ChangeEvent<HTMLInputElement>) => void类型可以直接复用。

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