React 中的 onInput/onChange
DOM 的oninput
和onchange
oninput
在输入内容的时候,持续调用,通过element.value
可以持续取值,失去焦点和获取焦点不会被调用。
onchange
在输入期间不会被调用,在失去焦点且失去焦点时的value
与获得焦点时的value
不一致(输入内容有变化)的时候才会被调用。
如果需要检测用户一个输入框的内容是否有变化,onchange
就能很好地处理这种情况。
<body>
<input type="text" id="myInput" oninput="myinput()" />
<input type="text" id="change" onchange="mychange()" />
</body>
<script>
function myinput() {
var x = document.getElementById("myInput").value;
console.info("input", x);
}
function mychange() {
var x = document.getElementById("change").value;
console.info("change", x);
}
</script>
React 中的onInput
和onChange
React 的onInput
和onChange
并没有多少区别,其作用都是在用户持续输入的时候触发,不在失去获取或者失去焦点的时候触发。
要获取焦点相关的事件需要通过onFocus
和onBlur
。而需要检测用户输入的内容是否有变化则需要手动去取值对比,没有原生的onChange
那样便捷。
export default function InputChange() {
function input(e) {
console.info("input", e.target.value);
}
function change(e) {
console.info("change", e.target.value);
}
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<input onFocus onBlur onInput={input}></input>
<input onChange={change}></input>
</div>
);
}
查看对应的参数的TypeScript
类型:
<input onInput={(evt: React.FormEvent<HTMLInputElement>) => {}}></input>
<input onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {}}></input>
onInput
的参数是React.FormEvent<HTMLInputElement>
,而onChange
是React.ChangeEvent<HTMLInputElement>
,已经区分开了表单Form
事件和Change
事件。
onChange
对应的多个target
,猜测是因为onChange
可以用在其他的元素上,传入的泛型不一定是HTMLInputElement
,如select
select
的onchange
事件:((event: React.ChangeEvent) => void) | undefined
interface FormEvent<T = Element> extends SyntheticEvent<T> {}
interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
target: EventTarget & T;
}
继续往下查看SyntheticEvent
:
interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}
继续看BaseSyntheticEvent
:
interface BaseSyntheticEvent<E = object, C = any, T = any> {
nativeEvent: E;
currentTarget: C;
target: T;
bubbles: boolean;
cancelable: boolean;
defaultPrevented: boolean;
eventPhase: number;
isTrusted: boolean;
preventDefault(): void;
isDefaultPrevented(): boolean;
stopPropagation(): void;
isPropagationStopped(): boolean;
persist(): void;
timeStamp: number;
type: string;
}
这里就是React
合成事件的基础interface
了,也含有target
,阻止事件冒泡的stopPropagation
和阻止默认行为的preventDefault
都在这里了。从TS
层面能看出的就是onInput
和onChange
基于的事件不一样(React.FormEvent
和React.ChangeEvent
),而onChange
事件可用于不同的元素中,target
也可能是不同的元素对象。
React 中的 onInput/onChange的更多相关文章
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- react中键盘enter事件处理
对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...
- react中这些细节你注意过没有?
react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { const ...
- React中props与state
以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...
- React中的响应式设计思想和事件绑定
这两个点是react入门非常重要的两个点,以前我们是直接操作dom的形式去做,react的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,他在做编程的时候,强调的是我们不要直接 ...
- React中最基础的jsx语法
import React, { Component } from 'react'; class App extends Component { render() { return ( <div ...
- react中事件冒泡之填坑
今天在写个组件,大致代码是这样的: class Switch extends React.Component { handlerChange = (e) => { const {onChange ...
- React中input框设置value报错解析
react input 不设置onChange的常见错误截图 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表单元素做了专门的优化处理,他对表单元素做了一些抽象,使得他们 ...
随机推荐
- 【poj 2115】C Looooops(数论--拓展欧几里德 求解同余方程 模版题)
题意:有一个在k位无符号整数下的模型:for (variable = A; variable != B; variable += C) statement; 问循环的次数,若"永不停息&q ...
- HDU 3537 Daizhenyang's Coin 翻硬币博弈
题意: 给你n个硬币,你可以从中拿出来1.2.3个硬币,它们不一定要连续,你只需要保证拿出来的硬币中那个下标最大的硬币一定要是正面朝上,最后谁不能操作,谁就输了 题解: 翻硬币游戏 结论: 局面的SG ...
- linux搭建网站
CentOS 1.安装 yum -y install nginx *或者安装指定版本,版本网址:http://nginx.org/packages/centos/7/x86_64/RPMS/ rpm ...
- IOS键盘收起后,页面底部留白处理
环境:vue+vant 的H5页面 场景:输入框输入信息时,如登录.注册等表单信息 问题:键盘收回后页面底部留白,导致dialog组件按钮位移,视觉上,其中的按钮无法正常工作 解决方案:监听失去焦点时 ...
- Linux 驱动框架---dm9000分析
前面学习了下Linux下的网络设备驱动程序的框架inux 驱动框架---net驱动框架,感觉知道了一个机器的大致结构还是不太清楚具体的细节处是怎么处理的,所以今天就来以dm9000这个网上教程最多的驱 ...
- 探究为什么FreeRTOS 有些API不能在中断服务函数中调用,转而需要调用带ISR的版本
用了好久的FreeRTOS以前只是知道,如果在中断服务程序中调用某一些FreeRTOS的API函数时需要注意,如果有ISR版本的一定要调用末尾带ISR的函数,并且中断服务程序要调用freeRTOS的A ...
- golang1.16新特性速览
今天是假期最后一天,明天起大家也要陆续复工了.golang1.16也在今天正式发布了. 原定计划是2月1号年前发布的,不过迟到也是golang的老传统了,正好也趁着最后的假期快速预览一下golang1 ...
- Windows中VS code无法查看C++ STL容器的值 - 解决方法
Windows中VS code debug时无法查看C++ STL容器内容 首先,你很可能用的是x64版本的Windows. 我发现一个有效的解决方法,但在x64版本的Windows上安装MinGW时 ...
- Object Destructuring Assignment vs Object.assign
Object Destructuring Assignment vs Object.assign // const params = Object.assign({}, this.$route.par ...
- JavaScript getter and setter All In One
JavaScript getter and setter All In One getter & setter JavaScript Object Accessors JavaScript A ...