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
变量上,从而查看真正的事件类型。
React报错之Property 'value' does not exist on type EventTarget的更多相关文章
- React报错之Property 'X' does not exist on type 'HTMLElement'
正文从这开始~ 总览 在React中,当我们试图访问类型为HTMLElement 的元素上不存在的属性时,就会发生Property 'X' does not exist on type 'HTMLEl ...
- React报错之Property 'value' does not exist on type 'HTMLElement'
正文从这开始~ 总览 当我们试图访问一个类型为HTMLElement的元素上的value属性时,会产生"Property 'value' does not exist on type 'HT ...
- React报错之Parameter 'props' implicitly has an 'any' type
正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an ...
- React报错之Parameter 'event' implicitly has an 'any' type
正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时,会产生"Parameter 'event' implicitly has an 'any' type"错误.为了解决 ...
- 解决TS报错Property 'style' does not exist on type 'Element'
在使用queryselector获取一个dom元素,编译时却报错说property 'style' does not exist on type 'element'. 原因:这是typescript的 ...
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...
- elasticsearch查询:启动项目报错No property ... found for...Did you mean '...'?
网上找的案例是: 实体类字段定义:private String sku_no;dao中接口名定义:Goods findBySkuNo(String skuNo);spring-data按照接口方法定义 ...
- react中使用typescript时,error: Property 'setState' does not exist on type 'Home'
问题描述: 我在react中用typescript时,定义一个Home组件,然后在组件里用setState时会有这样一个报错:(如图)Property 'setState' does not exis ...
- notification 报错the method build() is undefined for the type Notificatin.Builder
notification 报错the method build() is undefined for the type Notificatin.Builder 这事api版本号太低导致的 Notifi ...
随机推荐
- 开发工具-Java SDK下载地址
更新记录 2022年6月14日 加入更多的下载地址. 2022年6月10日 完善标题. 下载地址: https://www.oracle.com/java/technologies/downloads ...
- IE让我首次遭受了社会的毒打
2022年6月15日,微软终止对IE的支持,自此IE走入历史,可以说这是一个时代的终结. 自己在 2011 年刚从业时,IE 在国内的市场占有率可是遥遥领先的,下图来自于 StatCounter 网站 ...
- Apache ShardingSphere 5.1.2 发布|全新驱动 API + 云原生部署,打造高性能数据网关
在 Apache ShardingSphere 5.1.1 发布后,ShardingSphere 合并了来自全球的团队或个人的累计 1028 个 PR,为大家带来 5.1.2 新版本.该版本在功能.性 ...
- 【SpringBoot】YAML 配置文件
博客主页:准Java全栈开发工程师 00年出生,即将进入职场闯荡,目标赚钱,可能会有人觉得我格局小.觉得俗,但不得不承认这个世界已经不再是以一条线来分割的平面,而是围绕财富旋转的球面,成为有钱人不是为 ...
- SAP 实例 12 List Box with Value List from PBO Module
REPORT demo_dynpro_dropdown_listbox. DATA: name TYPE vrm_id, list TYPE vrm_values, value LIKE LINE O ...
- Pytorch从0开始实现YOLO V3指南 part4——置信度阈值和非极大值抑制
本节翻译自:https://blog.paperspace.com/how-to-implement-a-yolo-v3-object-detector-from-scratch-in-pytorch ...
- PoweJob高级特性-MapReduce完整示例
由于网上搜索 PowerJob MapReduce 都是设计原理,demo也展示个空壳子,没有演示Map到Reduce结果怎么传递,对于没有MR开发经验的人来说并没有什么帮助,所以这里写了一个有完整计 ...
- P1087 FBI树 [2004普及]
这是个正常的.很简单的分治,然后我成功地将这个题搞成了一个贼难搞的东西 还是说一下我那个非常麻烦的思路: 1. 建树 2. 后序遍历 然后就在建树的过程中死循环了,然后还一堆毛病 看了一个AC代码,该 ...
- 一键部署bash脚本怎么写
因为我开源的一键部署应用到linux服务器的AntDeploy, 在linux部署是需要安装一个agent服务(systemctl服务) 如果是手动第一次安装的话 需要敲 下载 wget 解压 tar ...
- 如何快速体验OneOS
随便逛了逛 之前有简单了解过OneOS,今天逛了下OneOS专区,发现官方终于也在宣传方面发力了啊,很多文章都非常专业,也有开发者在专区里面提问题了.也发现,部分开发者倒在了第一步,如何编译下载运行O ...