如何从单选按钮触发React.ChangeEvent？事件不触发无TS报错求解决

问题原因 #

• onChange绑定逻辑错误：你当前写的onChange={() => handleChange}只是定义了一个返回handleChange函数的匿名函数，没有实际执行handleChange，所以事件触发时没有任何逻辑运行。没有TypeScript报错是因为语法本身合法，只是运行逻辑不符合预期。
• 自定义参数未传递：你的handleChange定义了第二个参数range，但绑定事件时没有主动传入该参数，即使执行函数也会拿到undefined值。

附带问题解答 #

你写的checked={salaryRange === "0"}是完全正确的，这是React受控单选按钮的标准实现方式，通过state值与当前radio的value做全等判断控制选中状态，符合受控组件的设计规范。 #

解决方案 #

方案1：简化实现（更推荐） #

直接从事件对象读取选中的value，不需要额外传参，代码更简洁易维护：

// 单选按钮写法
<input
    type="radio"
    value="0"
    id="0"
    name="salary"
    checked={salaryRange === "0"}
    onChange={handleChange} // 直接传入函数引用，React会自动注入事件对象
/>
0 - 1.0

// handleChange改写
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const range = e.target.value;
    console.log("changed radio button", range);
    // 这里更新salaryRange状态即可：setSalaryRange(range)
}

方案2：保留自定义参数的写法 #

如果确实需要主动传递额外参数，可以按以下方式修改绑定逻辑：

// 单选按钮写法
<input
    type="radio"
    value="0"
    id="0"
    name="salary"
    checked={salaryRange === "0"}
    onChange={(e) => handleChange(e, "0")} // 主动传入事件对象和自定义参数
/>
0 - 1.0

// handleChange保留你原有定义即可
function handleChange(
    e: React.ChangeEvent<HTMLInputElement>,
    range: string
) {
    console.log("changed radio button", range);
}

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