参考链接:https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput

DOM 的oninputonchange


oninput在输入内容的时候,持续调用,通过element.value可以持续取值,失去焦点和获取焦点不会被调用。

onchange在输入期间不会被调用,在失去焦点且失去焦点时的value与获得焦点时的value不一致(输入内容有变化)的时候才会被调用。

如果需要检测用户一个输入框的内容是否有变化,onchange就能很好地处理这种情况。

  1. <body>
  2. <input type="text" id="myInput" oninput="myinput()" />
  3. <input type="text" id="change" onchange="mychange()" />
  4. </body>
  5. <script>
  6. function myinput() {
  7. var x = document.getElementById("myInput").value;
  8. console.info("input", x);
  9. }
  10. function mychange() {
  11. var x = document.getElementById("change").value;
  12. console.info("change", x);
  13. }
  14. </script>

React 中的onInputonChange

参考 Document how React's onChange relates to onInput

React 的onInputonChange并没有多少区别,其作用都是在用户持续输入的时候触发,不在失去获取或者失去焦点的时候触发。

要获取焦点相关的事件需要通过onFocusonBlur。而需要检测用户输入的内容是否有变化则需要手动去取值对比,没有原生的onChange那样便捷。

  1. export default function InputChange() {
  2. function input(e) {
  3. console.info("input", e.target.value);
  4. }
  5. function change(e) {
  6. console.info("change", e.target.value);
  7. }
  8. return (
  9. <div style={{ display: "flex", flexDirection: "column" }}>
  10. <input onFocus onBlur onInput={input}></input>
  11. <input onChange={change}></input>
  12. </div>
  13. );
  14. }

查看对应的参数的TypeScript类型:

  1. <input onInput={(evt: React.FormEvent<HTMLInputElement>) => {}}></input>
  2. <input onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {}}></input>

onInput的参数是React.FormEvent<HTMLInputElement>,而onChangeReact.ChangeEvent<HTMLInputElement>,已经区分开了表单Form事件和Change事件。

onChange对应的多个target,猜测是因为onChange可以用在其他的元素上,传入的泛型不一定是HTMLInputElement,如select

selectonchange事件:

((event: React.ChangeEvent) => void) | undefined

  1. interface FormEvent<T = Element> extends SyntheticEvent<T> {}
  2. interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
  3. target: EventTarget & T;
  4. }

继续往下查看SyntheticEvent

  1. interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}

继续看BaseSyntheticEvent:

  1. interface BaseSyntheticEvent<E = object, C = any, T = any> {
  2. nativeEvent: E;
  3. currentTarget: C;
  4. target: T;
  5. bubbles: boolean;
  6. cancelable: boolean;
  7. defaultPrevented: boolean;
  8. eventPhase: number;
  9. isTrusted: boolean;
  10. preventDefault(): void;
  11. isDefaultPrevented(): boolean;
  12. stopPropagation(): void;
  13. isPropagationStopped(): boolean;
  14. persist(): void;
  15. timeStamp: number;
  16. type: string;
  17. }

这里就是React合成事件的基础interface了,也含有target,阻止事件冒泡的stopPropagation和阻止默认行为的preventDefault都在这里了。从TS层面能看出的就是onInputonChange基于的事件不一样(React.FormEventReact.ChangeEvent),而onChange事件可用于不同的元素中,target也可能是不同的元素对象。

React 中的 onInput/onChange的更多相关文章

  1. React中的合成事件

    React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

  2. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  3. react中键盘enter事件处理

    对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...

  4. react中这些细节你注意过没有?

    react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { const ...

  5. React中props与state

    以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...

  6. React中的响应式设计思想和事件绑定

    这两个点是react入门非常重要的两个点,以前我们是直接操作dom的形式去做,react的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,他在做编程的时候,强调的是我们不要直接 ...

  7. React中最基础的jsx语法

    import React, { Component } from 'react'; class App extends Component { render() { return ( <div ...

  8. react中事件冒泡之填坑

    今天在写个组件,大致代码是这样的: class Switch extends React.Component { handlerChange = (e) => { const {onChange ...

  9. React中input框设置value报错解析

    react input 不设置onChange的常见错误截图 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑.  React对表单元素做了专门的优化处理,他对表单元素做了一些抽象,使得他们 ...

随机推荐

  1. vector总结

    vector是不定长数组,具有静态数组的稳定性和动态分配内存的灵活性,在赛场上不失为指针之外牺牲部分时间的保险之举. 本文先介绍一些vector常用的函数(部分借鉴一篇博客中的内容 链接),并以此为铺 ...

  2. Codeforces Round #687 (Div. 2, based on Technocup 2021 Elimination Round 2) B. Repainting Street (枚举)

    题意:有\(n\)栋房子,每栋房子都有自己的颜色\(c_i\),你每次可以对连续的长度为\(k\)的区间改变任何房子的颜色,问最少多少次可以使得所有房子颜色相同. 题解:因为只有\(100\)中颜色, ...

  3. Vue的七种传值方式

    目录 1,父传子 2,子传父 3,兄弟组件传值 4,父组件使用子组件的数据和方法 5,子组件使用父组件的数据和方法 6,Vuex传值 6.1,定义store 6.2,挂载 6.3,使用 7,路由传值 ...

  4. Chapter Zero 0.1.2 CPU的架构

    CPU的架构 CPU内部含有一些微指令, 我们所使用的软件都要经过CPU内部的微指令集达成才行. 这些指令集的设计又分为两种设计理念, 这就是目前世界上常见的两种主要CPU架构: 精简指令集(Redu ...

  5. hdoj 5971

    Wrestling Match Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  6. c# 类(2)

    构造函数 和 析构函数 Constructors and destructors 构造函数是一个特殊的函数,当实例化一个类的时候自动调用这个函数,无返回值(不用定义返回类型)普通函数的定义 publi ...

  7. tfrecords转图片存储

    import os import shutil import tensorflow as tf import time import sys import cv2 # 图片存放位置 PATH_RES ...

  8. JVM系列之一 JVM的基础概念与内存区域

    前言 作为一名 Java 语言的使用者,学习 JVM 有助于解决程序运行过程中出现的问题.写出性能更高的代码. 可以说:学好 JVM 是成为中高级 Java 工程师的必经之路. 有感于从未整理归纳 J ...

  9. Vue Big Changes All in One

    Vue Big Changes All in One Vue 重大更新 Vue Versions Vue 版本变更 Vue 3.x Vue 2.x refs vue lifecycle https:/ ...

  10. how to measure function performance in javascript

    how to measure function performance in javascript Performance API Performance Timeline API Navigatio ...