首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

禁止使用onChange,仅对React输入组件使用onBlur

的做法是为了避免在用户输入过程中频繁触发事件,提高性能和用户体验。在React中,onChange事件是在每次输入变化时触发的,而onBlur事件是在输入框失去焦点时触发的。

使用onBlur事件可以在用户完成输入后进行相应的处理,例如验证输入内容、格式化数据等。相比之下,onChange事件会在每次输入变化时都触发,可能会导致频繁的重复操作,对性能造成一定的影响。

在React中,可以通过以下方式使用onBlur事件:

  1. 在组件中定义一个处理函数,用于处理输入框失去焦点时的操作:
代码语言:txt
复制
handleBlur = (event) => {
  // 处理失去焦点时的操作
}

render() {
  return (
    <input type="text" onBlur={this.handleBlur} />
  );
}
  1. 在函数式组件中,可以使用useCallback钩子函数来定义处理函数:
代码语言:txt
复制
const handleBlur = useCallback((event) => {
  // 处理失去焦点时的操作
}, []);

return (
  <input type="text" onBlur={handleBlur} />
);

禁止使用onChange,仅对React输入组件使用onBlur的场景包括但不限于:

  1. 表单验证:在用户完成输入后,使用onBlur事件进行表单验证,例如检查输入内容是否符合要求、是否为空等。
  2. 数据格式化:当用户输入完成后,可以使用onBlur事件对输入的数据进行格式化,例如金额的千位分隔、日期的格式化等。
  3. 实时搜索:当用户输入完成后,可以使用onBlur事件触发实时搜索操作,减少频繁的搜索请求。
  4. 自动保存:当用户输入完成后,可以使用onBlur事件触发自动保存操作,将输入内容保存到数据库或本地存储中。

腾讯云提供了一系列与React开发相关的产品和服务,可以帮助开发者构建高性能、可靠的应用程序。以下是一些推荐的腾讯云产品和产品介绍链接地址:

  1. 云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序。产品介绍链接
  2. 云数据库MySQL版(CDB):提供高性能、可扩展的云数据库服务,适用于存储和管理应用程序的数据。产品介绍链接
  3. 云函数(SCF):无服务器计算服务,支持使用JavaScript、Python等语言编写函数,无需管理服务器。产品介绍链接
  4. 云存储(COS):提供安全可靠的对象存储服务,适用于存储和管理应用程序的静态文件、图片、视频等。产品介绍链接
  5. 人工智能服务(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。产品介绍链接

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 中 getDerivedStateFromProps 的三个场景

根据应用场景的不同, getDerivedStateFromProps的使用方式也不同。 一、半受控组件 虽然 React 官方不推荐半受控组件,当然从 API 设计和维护的角度考虑也是不推荐的。...第二种场景是一些组件需要在用户输入时有一个中间状态,当触发某个操作时再把中间结果提交给上层。...={this.onChange} onBlur={this.onBlur} /> ); } } 而上层组件更新和组件本身 setState都会触发 getDerivedStateFromProps...={this.onChange} onBlur={this.onBlur} /> ); } } 三、记忆 记忆(memorize)是一种简单常见的优化方式,通过脏检查两次传入的值是不是同一个来记忆结果...Hooks React 16.8 稳定了 HooksAPI, Hooks在许多方面对比 class有巨大的优势,例如对于逻辑的复用,相对高阶组件不仅更方便灵活直观,性能也有很大的优势。

1.8K10

React入门四:React组件使用

---- 这是我参与8月更文挑战的第三天 1.组件介绍 使用React就是在使用组件 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点:可复用、独立、可组合 2....组件的两种创建方式 2.1 使用函数创建组件 使用js的函数(箭头函数)创建的组件 约定1:函数名称必须以大写字母开头        ...Hello/>,document.getElementById('root')) 2.2 使用类创建组件组件使用ES6 的class创建的组件 约定1:类名称必须以大写字母开头 约定2:类组件继承自...React.Component父类,从而可以使用父类中提供的方法或属性 约定3:类组件必须提供render() 方法 约定4:render()方法必须有返回值 表示该组件的结构 class Hello...创建Hello.js 在Hello.js中导入React 创建组件(函数 或 类) 在Hello.js中导入该组件 在index.js中导入Hello组件 渲染组件 hello.js import React

1.3K30
  • 使用storybook管理React组件

    本文已React的UI组件为例,演示如何新建/集成Storybook到项目中,并对UI组件进行全方位的管理,包括发布、demo文档、测试等。 1....以一个分页组件为例 从团队的stoneUI组件库直接移植过来 将Pagination、IconV组件源码放入components目录; 编写story: import React from 'react...测试UI组件 4.1 写测试用例的原因 找到bug 新修改没有改变已有的接口和功能 将测试用例作为文档 4.2 测试结构 使用storyshots插件来实现,其核心是使用Jest,原理是每次生成一份DOM...4.3 测试交互 storybook交互性测试可以使用 Enzyme来模拟用户输入,然后使用Mocha or Jest来进行结果测试,storybook又一个专门的插件帮助我们集成他们:specifications...,通过断言来测试UI组件的属性,更多使用方法可以参考specifications插件的使用

    3.3K20

    React使用组件

    React中主要分为类组件和函数组件,在本文主要讲解为react使用组件: 我们先定义并导出一个叫Com的类组件 import React, { Component } from "react";...变量中 import React, { Component } from "react"; class Com extends Component { constructor(props) {...:每次使用自定义事件时需要在构造器中使用bind函数进行绑定,将函数挂在到class实例上 简写方式: import React, { Component } from "react"; class Com...,现在是{this.state.time}点 ); } } export default Com; 上面的类组件过于繁琐,增加了很多不必要的麻烦,因此我们可以在今后的开发中使用以上方式来简写...state无需在写到构造器当中,直接写成实例属性 事件函数需要在构造器中使用bind绑定指向,直接使用箭头函数 state和事件都不在依赖构造器构造器可以不用写

    75820

    造一个 react-contenteditable 轮子

    也不对:div 不能输入啊,唉,谁说不能输入的?contentEditable 属性就是可以让用户手动输入的。 下面就带大家手写一个 react-contenteditable 的轮子吧。...用例 参考 input 元素的受控组件写法,可以想到肯定得有 value 和 onChange 两个 props,使用方法大概像这样: function App() { const [value,...checkUpdate 有人可能会有疑问:一般使用 input 之类输入组件的时候,如果没在 onChange 里 setValue,值都是不会改变的呀。...在这个 Issue 里说到因为没有对 onBlur 进行更新判断,因此,每次改变了值之后,再触发 blur 事件,值都不会改变。那加个 onBlur 的检查是否可行呢?...的组件就完成了,主要实现了: value 和 onChange 的数据流 在 componentDidUpdate 里处理光标总是被放在最前面的问题 在 shouldComponentUpdate 里添加

    1.7K20

    React】633- 使用 Hooks 优化 React 组件

    React 组件设计模式 在具体讨论方案之前,我们先简单的了解一下常见的 React 组件设计模式。...Render Props 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术 via: Render Props 它的本质实际上是通过一个函数...所以 Render Props 使用不当的话会非常容易造成不必要的重复渲染。 HoC 组件 React 里还有一种使用比较广泛的组件模式就是 HoC 高阶组件设计模式。...它是一种基于 React 的组合特性而形成的设计模式,它的本质是参数为组件,返回值为新组件的函数。我们来看看刚才的代码使用 HoC 组件修改后会变成什么样子。...我们先简单的了解下什么是 Hooks,它允许我们在不编写 class 的情况下使用 state 和 React 生命周期等相关特性。

    1.2K10

    react-live-route(react组件缓存)使用

    太坑了, 于是乎,找到了react-live-router,完美解决我们的问题: 下面是是使用方法: 1.下载库: npm i react-live-route 2.在外面的routes中配置使用 不需要改变我们之前的...这也是我选择使用这个库的原因, import { Route, Redirect, withRouter, Switch } from "react-router-dom"; import NotLiveRoute...: livePath livePath 为需要隐藏的页面的路径,具体规则与 react-router 中的 Route 的 path props 一样,使用 component 或 render 来渲染路由对应的组件...}/> alwaysLive alwaysLive 和 livePath 差不都,区别是路由的组件会在第一次 mount 后在其他任何路径都不会再被卸载。...> 注意存在的一个BUG:使用react-live-route 路由缓存之后,再使用import lazy懒加载引入路由 会造成bug (缓存的路由 和其它的路由同时存在) 大概的开箱使用说明就这么多

    1.1K10

    React动态添加标签组件

    (字符数) 接口传递的时候的分隔标记(是用逗号,还是其他) 直接处理表单,不需要二次处理 所以需要传入以下内容给该组件 title:标题 separator:分隔标记 maxLength:最大长度 color...={inputValue} onChange={(e) => setInputValue(e.target.value)} /> 每次输入内容都会修改inputValue的值 因为有多个标签,先定义一个变量来记录我们已经添加的标签...const [tags, setTags] = useState([]); // 待分隔列表 当鼠标在输入框外部点击或者敲击回车的时候,都需要添加一个标签 所以需要给输入框添加onBlur和onPressEnter...join(separator) }); }; 编辑状态 当我们处于编辑状态的时候,打开表单后,它原本就有内容了 监听一下表单的内容,如果存在,则使用分隔标记分隔后塞入tags中 useEffect((...,需要修改一下 折叠源码 import React, { useEffect, useRef, useState } from 'react'; import { Icon, Input, message

    43560

    react高阶组件概念与简单使用

    react 高阶组件概念与简单使用# 1 react 高阶组件是什么# 高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。...HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。 具体而言,高阶组件是参数为组件,返回值为新组件的函数。...上面这段话是来自react 官网的介绍,下面是个人消化后的理解: 它是一个函数,接收一个参数,这个参数是组件,然后再返回一个新组件(返回的这个组件里会含有处理过的 state 值); 归其缘由,它是一种设计思想...2 react 高阶组件作用# 精简代码,封装复用逻辑 ​ ... 3 简单实现 react 高阶组件# /** * 需求简述: * 实现两个组件文本框, * 一个组件为外边框为1px绿色、里面显示内容为当前浏览器的高宽...进阶」一文吃透 React 高阶组件(HOC): https://juejin.cn/post/6940422320427106335#heading-0 还有个小疑问也记录一下: 参考文章说“render

    55630

    React】学习笔记(一)——React入门、面向组件编程、函数柯里化

    采用组件化模式、声明式编码,提高开发效率及组件复用率。在React Native中可以使用React语法进行移动端开发。使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互。...即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值。 在非受控组件中,可以使用一个ref来从DOM获得表单值。...在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 进行更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式...4.3、总结 受控组件 受控组件依赖于状态 受控组件的修改会实时映射到状态值上,此时可以对输入的内容进行校验 受控组件只有继承React.Component才会有状态 受控组件必须要在表单上使用...onChange事件来绑定对应的事件 非受控组件 非受控组件不受状态的控制 非受控组件获取数据就是相当于操作DOM 非受控组件可以很容易和第三方组件结合,更容易同时集成 React 和非 React

    5K30

    使用Enzyme测试React(Native)组件|洞见

    给这个纯函数输入一些应用程序的状态,就会得到相应的UI描述的输出,这个过程不会去直接操作实际的UI元素,也不会产生所谓的副作用。...Facebook官方提供了react-addons-test-utils可以让我们使用浅渲染这个特性,用于测试虚拟DOM对象,即React.Component的实例。...前面我们所谈论的都是如何测试使用react-dom所构建的React组件,即最终渲染的结果是浏览器当中的DOM结构,但对于React Native来说,JavaScript代码最终会被编译并用于调用iOS...事实上,我们可以通过欺骗React Native让它返回常规的React组件而不是Native组件,然后就又能愉快地使用传统的JavaScript测试库来单独测试React Native组件逻辑。...react-native-mock这个辅助库,这是一个使用纯JavaScript将全部的React Native组件进行mock的第三方库,只需要导入这个库就可以对React Native组件进行渲染和测试

    2.4K40

    图形编辑器开发:实现自定义规则输入组件

    其中很重要的交互功能是用户可以 通过输入框去修改一些属性。 不同类型的输入框有着各自的规则,今天我们来看看怎么去实现这么一个 自定义规则输入React 组件。...(感觉 onChange 命名会不会更好) interface ICustomRuleInputProps { parser: (newValue: string, preValue: string...NumberInput 实现 下面就基于这个 CustomRuleInput,扩展一个数字输入框 NumberInput 组件。 该组件接受的 props: value:数据源。...如果你有需求,这里可以做一层单位转换,比如角度转弧度; min:最小值,如果小于 min,会修正为 min; onBlur:数据改变相应事件。 校验补正算法在 NumberInput 组件内部实现。...直接看组件实现: import { FC, useEffect, useRef } from 'react'; import { CustomRuleInput } from '.

    24521
    领券