打字稿 onChange 事件类型

Posted 2023-02-22

【中文标题】打字稿 onChange 事件类型

【英文标题】：typescript onChange event type

【发布时间】：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 且没有特殊问题的元素 - 这可能与您在打字稿构建中遇到的问题有关- 它完全有一个单独的界面。我会看看这个界面与其他表单控件有什么不同，我相信你会在那里找到一些关于如何解决这个问题的提示

【参考方案1】：

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

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

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

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

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