解決React報錯Property?'value'?does?not?exist?on?type?EventTarget

更新時間：2022年12月01日 15:38:17 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了React報錯Property?'value'?does?not?exist?on?type?EventTarget的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

當event參數(shù)的類型不正確時，會產(chǎn)生"Property 'value' does not exist on type EventTarget"錯誤。為了解決該錯誤，將event的類型聲明為React.ChangeEvent<HTMLInputElement> 。然后就可以通過event.target.value 來訪問其值。

這里有個示例用來展示錯誤是如何發(fā)生的。

// App.tsx
function App() {
  // ??? incorrect event type
  const handleChange = (event: Event) => {
    console.log(event.target?.value);
  };
  return (
    <div>
      {/* ?? Property 'value' does not exist on type 'EventTarget'. */}
      <input onChange={handleChange} type="text" id="message" />
    </div>
  );
}
export default App;

正確聲明類型

為了解決該錯誤，我們必須將event參數(shù)的類型聲明為React.ChangeEvent<HTMLInputElement>。

// App.tsx
function App() {
  // ? correct event type
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
  };
  return (
    <div>
      <input onChange={handleChange} type="text" id="message" />
    </div>
  );
}
export default App;

React中的ChangeEvent類型有一個target屬性，引用的是事件被派發(fā)的元素。

找出類型

你要找出事件的類型，最簡單的方法是將事件處理內(nèi)聯(lián)編寫，并將鼠標懸浮在函數(shù)的event參數(shù)上。

// App.tsx
function App() {
  // ??? event is written inline
  return (
    <div>
      <input
        onChange={e => console.log(e.target.value)}
        type="text"
        id="message"
      />
    </div>
  );
}
export default App;

截圖顯示，當我們將鼠標懸停在內(nèi)聯(lián)事件處理器的e變量上時，我們便得到了事件的正確類型。

這種方法適用于所有的事件處理器，一旦你知道了事件的正確類型，你就可以提取你的處理函數(shù)并正確得對其類型聲明。

TypeScript總是能夠推斷出內(nèi)聯(lián)事件處理器的事件類型，因為你已經(jīng)安裝了React的類型定義文件。

# ??? with NPM
npm install --save-dev @types/react @types/react-dom
# ----------------------------------------------
# ??? with YARN
yarn add @types/react @types/react-dom --dev