打字稿 onChange 事件类型答案

【问题标题】：typescript onChange event type打字稿 onChange 事件类型
【发布时间】：2021-12-24 23:00:35
【问题描述】：

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

我试过了，但它不适用于单选按钮，尽管它适用于 input type="text"

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)

【问题讨论】：

this answer 暗示应该使用React.FormEvent（而不是React.ChangeEvent）
这也不行
在阅读更多内容后，在大多数实现中，currentTarget 似乎优于 target。它旨在处理状态更新，但有趣的部分是：似乎文本输入是唯一可以接受 target 且没有特殊问题的元素 - 这可能与您在打字稿构建中遇到的问题有关- 它完全有一个单独的界面。我会看看这个界面与其他表单控件有什么不同，我相信你会在那里找到一些关于如何解决这个问题的提示

标签： javascript reactjs typescript events react-typescript

【解决方案1】：

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

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

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

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

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

【讨论】：