typescript onChange 事件类型

Question

如何使用 ReactJs 和 typescript 为单选按钮指定事件类型

我试过了，但它不适用于单选按钮，尽管它适用于输入类型="文本"

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
   ....    
};

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

错误

Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: ChangeEvent<{}>, checked: boolean) => void'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'ChangeEvent<{}>' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
      Type '{}' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 329 more.ts(2322)

Answer 1

谢谢，无论如何我找到了解决方案。 <HTMLInputElement> 不可分配给单选按钮，因此我们可以执行以下操作以跳过构建错误，

(event: React.ChangeEvent<Record<string, unknown>>) {
console.log(event.target.value);
}

如果我们有单选按钮组，应该使用上面的代码。

否则，对于单个单选按钮，应使用此

(event: React.ChangeEvent<unknown>, checked: boolean) {
  console.log(checked);
}

typescript onChange 事件类型

typescript onChange event type

javascript

events

typescript

reactjs

react-typescript