reactjs - 我該如何修復「[ts] 屬性 'getAttribute' 在類型 'EventTarget' 上不存在」

我正在嘗試在 React 中使用 TypeScript 創建一個 onClick 事件類型，以捕捉 target 屬性。但我收到錯誤「[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] 屬性 'getAttribute' 在類型 'EventTarget' 上不存在。 any

答案＃1

這對我有效

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

我剛剛把 HTMLInputElement 加為 event.target 的類型

答案＃2

老問題，但以防其他人遇到它，這裡有一個答案：

你應該使用 event.currentTarget 而不是 event.target

event.currentTarget 指向你附加監聽器的元素。在本例中，它是 HTMLLIElement，如 React.MouseEvent<HTMLLIElement> 所指定的

`event.target` 另一方面，是觸發事件的元素，它可能不是附加監聽器的那個元素！如果 `<li>` 的任何子元素被點擊，都可能觸發滑鼠事件。由於元素的類型未知，它可以是任何東西（`<p>` 或 `<img>` 或 `<div>` 或其他任何元素），因此 TypeScript 無法確認它上面是否存在任何值或方法。

考慮這個：

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> 元素，而 <img> 元素沒有 value 屬性，這會導致你的程式碼拋出錯誤。如果你點擊「圖片的標題標頭」，同樣的情況也會發生，event.target 將會是 <div> 元素。

使用 event.currentTarget 將始終返回監聽器附加的 <li> 元素，無論在任何這些情況下。這樣你的代碼在所有這些情況下將會如你所預期的那樣運行，而不會拋出錯誤。

順便說一下，對於任何因其他類似情況而查看這個問題的人：Davit 的回答只是針對症狀而沒有解決原因，並且可能會在你自己的程式碼庫中將錯誤隱藏起來。請確保你了解為什麼會出現錯誤，這樣你才能修正它，而不僅僅是隱藏它。