为什么 TypeScript 拒绝复选框输入的结构？答案

【问题标题】：Why TypeScript refuse sytacs of checkbox input?为什么 TypeScript 拒绝复选框输入的结构？
【发布时间】：2021-11-28 16:09:24
【问题描述】：

以下复选框可以正常工作，但 TypeScript 会发出警告：

<input
  type="checkbox"
  onClick={(event: React.MouseEvent<HTMLInputElement>) => {
    setIsTOSAccepted(event.target.checked);
  }}
  defaultChecked={isTOSAccepted}
/>

Failed to compile.

./pages/hu/buyTicket/[eventId].tsx:530:49
Type error: Property 'checked' does not exist on type 'EventTarget'.

  528 |                 style={{ marginRight: "16px" }}
  529 |                 onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
> 530 |                   setIsTOSAccepted(event.target.checked);
      |                                                 ^
  531 |                 }}
  532 |                 defaultChecked={isTOSAccepted}
  533 |               />
error Command failed with exit code 1.

我尝试将React.MouseEvent 替换为其他类型的事件，也尝试将HTMLInputElement 替换为没有运气。

我在这里查看了文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

但HTMLInputElement 具有click 事件和checked 属性。奇怪。

【问题讨论】：

请改用event.currentTarget.checked。 currentTarget 将永远是 <input>。 target 可以是任何随机子元素。
为什么第二个sn-p说按钮元素event: React.MouseEvent<HTMLButtonElement>？
啊，我也试过 Button.. 但currentTarget 帮助了

标签： html reactjs typescript

【解决方案1】：

一般来说，当一个带有事件监听的元素被点击时，目标不一定就是那个元素。

outer.onclick = (e) =&gt; console.log(e.target);

<div id=outer>
  outer
  <div id=inner>inner</div>
</div>

虽然输入可能没有子元素，但 TypeScript 无法解析和识别细节 - 您必须改为引用 .currentTarget，它将引用侦听器附加到的元素。

setIsTOSAccepted(event.currentTarget.checked);

你也可以简化

onClick={(event: React.MouseEvent<HTMLInputElement>) => {

到

onClick={(event) => {

因为 TS 已经知道event 的类型是什么。

【讨论】：