快捷導(dǎo)航

解決React報(bào)錯(cuò)Property?'value'?does?not?exist?on?type?EventTarget

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

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

總覽

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

這里有個(gè)示例用來(lái)展示錯(cuò)誤是如何發(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;

正確聲明類(lèi)型

為了解決該錯(cuò)誤，我們必須將event參數(shù)的類(lèi)型聲明為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類(lèi)型有一個(gè)target屬性，引用的是事件被派發(fā)的元素。

找出類(lèi)型

你要找出事件的類(lèi)型，最簡(jiǎn)單的方法是將事件處理內(nèi)聯(lián)編寫(xiě)，并將鼠標(biāo)懸浮在函數(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;

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

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

TypeScript總是能夠推斷出內(nèi)聯(lián)事件處理器的事件類(lèi)型，因?yàn)槟阋呀?jīng)安裝了React的類(lèi)型定義文件。

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

總結(jié)

為了解決文章開(kāi)頭的錯(cuò)誤，我們需要正確的聲明event參數(shù)的類(lèi)型。最便捷的找出事件類(lèi)型的方式是，內(nèi)聯(lián)編寫(xiě)事件處理函數(shù)，并將鼠標(biāo)懸浮到e變量上，從而查看真正的事件類(lèi)型。

原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報(bào)錯(cuò)Property 'value' does not exist on type EventTarget的詳細(xì)內(nèi)容，更多關(guān)于React 報(bào)錯(cuò)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: