关于react.js:React报错之Property-value-does-not-exist-on-type-EventTarget

注释从这开始~

总览

当 event 参数的类型不正确时，会产生 ”Property ‘value’ does not exist on type EventTarget” 谬误。为了解决该谬误，将 event 的类型申明为React.ChangeEvent<HTMLInputElement>。而后就能够通过event.target.value 来拜访其值。

这里有个示例用来展现谬误是如何产生的。

// 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 参数的类型申明为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 属性，援用的是事件被派发的元素。

找出类型

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

// 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;

截图显示，当咱们将鼠标悬停在内联事件处理器的 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 变量上，从而查看真正的事件类型。