正文从这开始~
总览
当event
参数的类型不正确时,会产生"Property 'value' does not exist on type EventTarget"错误。为了解决该错误,将event
的类型声明为React.ChangeEvent
。然后就可以通过event.target.value
来访问其值。
文章图片
这里有个示例用来展示错误是如何发生的。
// App.tsxfunction 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.tsxfunction App() {
// ? correct event type
const handleChange = (event: React.ChangeEvent) => {
console.log(event.target.value);
};
return ();
}export default App;
React中的
ChangeEvent
类型有一个target
属性,引用的是事件被派发的元素。找出类型 你要找出事件的类型,最简单的方法是将事件处理内联编写,并将鼠标悬浮在函数的
event
参数上。// App.tsxfunction 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】截图显示,当我们将鼠标悬停在内联事件处理器的
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报错之You provided a `checked` prop to a form field
- Ant|Ant Design Pro从零到一(认识AntD)
- React报错之React hook 'useState' cannot be called
- React报错之React Hook 'useEffect' is called in function
- React报错之React hook 'useState' is called conditionally
- react.js|react学习----jsx语法
- react.js|react学习----组件
- React报错之Expected an assignment or function
- React报错之Unexpected default export of anonymous function