React报错之Property 'value' does not exist on type EventTarget
2023-02-18 16:40:33 时间
正文从这开始~
总览
当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
变量上,从而查看真正的事件类型。
相关文章
- C#开发微信公众平台-就这么简单(附Demo)
- 程序员的人性思考(续)
- 恋爱虽易,相处不易:当EntityFramework爱上AutoMapper
- 魅力 .NET:从 Mono、.NET Core 说起
- 分享我对 ASP.NET vNext 的一些感受,也许多年回过头看 So Easy!
- 我的“第一次”,就这样没了:DDD(领域驱动设计)理论结合实践
- 程序员的人性思考(下)
- 2015-写给明年现在的自己
- POCO Controller 你这么厉害,ASP.NET vNext 知道吗?
- Unity依赖注入使用详解
- 初试JqueryEasyUI(附Demo)
- ASP.NET WebApi OWIN 实现 OAuth 2.0
- 程序员的人性思考(上)
- Visual Studio 2015 开发 ASP.NET 5 有何变化?
- 拨开迷雾,找回自我:DDD 应对具体业务场景,Domain Model 到底如何设计?
- Repository 返回 IQueryable?还是 IEnumerable?
- 一缕阳光:DDD(领域驱动设计)应对具体业务场景,如何聚焦 Domain Model(领域模型)?
- 让 ASP.NET vNext 在 Mac OS 中飞呀飞。。。
- 小菜学习设计模式(五)—控制反转(Ioc)
- 掀起你的盖头来:Unit Of Work-工作单元