我如何修复“[ts] 属性 'getAttribute' 在类型 'EventTarget' 上不存在”

Question

我正在尝试创建一个 onClick 事件类型以在使用 TypeScript 时捕获 React 中的目标属性。但我收到错误“[ts] 属性 'getAttribute' 在类型 'EventTarget' 上不存在。” 任何人都可以帮助提供有关如何解决此问题的最佳实践的见解吗？

我尝试为 event.target 部分使用另一个辅助函数。这样我就可以排版这部分，以及这个函数中的 getAttribute 部分。但是，有人告诉我这不是最佳实践和错误方法。

const Option = (props: OptionProps) => {

  const HandleOptionChange = (event: React.MouseEvent<HTMLLIElement>) => {
    return props.onOptionChange(event.target.getAttribute('value'));
  }

  return (
    <li
      key={props.key}
      value={JSON.stringify(props.word)}
      onClick={HandleOptionChange}
    >
      {props.word.value}
    </li>
  )
}

ts 错误信息：

[ts] 类型“EventTarget”上不存在属性“getAttribute”。任何

Answer 1

老问题，但以防万一其他人遇到它，这里有一个答案：

你应该使用event.currentTarget而不是event.target

event.currentTarget指向您已附加侦听器的元素。在这种情况下，它是HTMLLIElement，如指定的React.MouseEvent<HTMLLIElement>

event.target另一方面，是发起事件的元素，它可能不是侦听器所附加的元素！<li>如果单击 的任何子级，都可以启动鼠标事件。由于元素的类型是未知的，因为它实际上可能是任何东西（<p>或<img>或<div>或其他任何东西），打字稿无法确认其上存在任何值/方法。

考虑一下：

return (
  <li
    key={props.key}
    value={JSON.stringify(props.word)}
    onClick={HandleOptionChange}
  >
    content of the li
    <div>
      header title for the image
      <img src="https://example.image.source/" />
    </div>
  </li>
)

您可以单击图像，然后单击event.target该<img>元素，该元素没有value 属性，这会使您的代码抛出错误。如果您单击“图像的标题标题”，也会发生同样的事情，这event.target将是<div>元素。

在所有这些场景中，使用event.currentTarget将始终返回<li>侦听器附加到的元素。然后，您的代码将按照您所期望的方式运行，而不是抛出错误。

顺便说一句，对于任何在其他类似情况下查看此问题的人：Davit 的答案是解决症状而不解决原因，并且可能会在您自己的代码库中隐藏 linter 中的错误。确保您了解出现错误的原因，以便可以修复它而不是仅仅隐藏它。

Answer 2

这对我有用

const HandleOptionChange = (event: React.MouseEvent<HTMLLIElement>) => {
    const el = event.target as HTMLInputElement
    return props.onOptionChange(el.getAttribute('value'));
  }

我刚刚添加HTMLInputElement为 event.target 类型