React报错之Property ‘value’ does not exist on type EventTarget

正文从这开始~

总览

event参数的类型不正确时,会产生"Property 'value' does not exist on type EventTarget"错误。为了解决该错误,将event的类型声明为React.ChangeEvent 。然后就可以通过event.target.value 来访问其值。

React报错之Property ‘value’ does not exist on type EventTarget插图

这里有个示例用来展示错误是如何发生的。

// App.tsx

function App() {

  // 👇️ incorrect event type
  const handleChange = (event: Event) => {
    console.log(event.target?.value);
  };

  return (
    
{/* ⛔️ Property 'value' does not exist on type 'EventTarget'. */}
); } export default App;

正确声明类型

为了解决该错误,我们必须将event参数的类型声明为React.ChangeEvent

// App.tsx

function App() {
  // ✅ correct event type
  const handleChange = (event: React.ChangeEvent) => {
    console.log(event.target.value);
  };

  return (
    
); } export default App;

React中的ChangeEvent类型有一个target属性,引用的是事件被派发的元素。

找出类型

你要找出事件的类型,最简单的方法是将事件处理内联编写,并将鼠标悬浮在函数的event参数上。

// App.tsx

function App() {
  // 👇️ event is written inline
  return (
    
console.log(e.target.value)} type="text" id="message" />
); } export default App;

React报错之Property ‘value’ does not exist on type EventTarget插图1

截图显示,当我们将鼠标悬停在内联事件处理器的e变量上时,我们便得到了事件的正确类型。

这种方法适用于所有的事件处理器,一旦你知道了事件的正确类型,你就可以提取你的处理函数并正确得对其类型声明。

TypeScript总是能够推断出内联事件处理器的事件类型,因为你已经安装了React的类型定义文件。

# 👇️ with NPM
npm install --save-dev @types/react @types/react-dom

# ----------------------------------------------

# 👇️ with YARN
yarn add @types/react @types/react-dom --dev

总结

为了解决文章开头的错误,我们需要正确的声明event参数的类型。最便捷的找出事件类型的方式是,内联编写事件处理函数,并将鼠标悬浮到e变量上,从而查看真正的事件类型。

文章来源于互联网:React报错之Property 'value' does not exist on type EventTarget

THE END
分享
二维码