学习React中ref的两个demo
时间:2022-06-07
本文章向大家介绍学习React中ref的两个demo,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
- 为了摆脱繁琐的Dom操作, React提倡组件化, 组件内部用数据来驱动视图的方式,来实现各种复杂的业务逻辑 ,然而,当我们为原始Dom绑定事件的时候, 还需要通过组件获取原始的Dom, 而React也提供了
ref
为我们解决这个问题.
为什么不能从组件直接获取Dom?
- 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM
如果需要从组件获取真实 DOM 的节点,就要用到官方提供的
ref
属性
使用场景
- 当用户加载页面后, 默认聚焦到input框
import React, { Component } from 'react';
import './App.css';
// React组件准确捕捉键盘事件的demo
class App extends Component {
constructor(props) {
super(props)
this.state = {
showTxt: ""
}
this.inputRef = React.createRef();
}
// 为input绑定事件
componentDidMount(){
this.inputRef.current.addEventListener("keydown", (event)=>{
this.setState({showTxt: event.key})
})
// 默认聚焦input输入框
this.inputRef.current.focus()
}
render() {
return (
<div className="app">
<input ref={this.inputRef}/>
<p>当前输入的是: <span>{this.state.showTxt}</span></p>
</div>
);
}
}
export default App;
- 自动聚焦input动画演示
使用场景
- 为了更好的展示用户输入的银行卡号, 需要每隔四个数字加一个空格
实现思路:
- 当用户输入的字符个数, 可以被5整除时, 额外加一个空格
- 当用户删除数字时,遇到空格, 要移除两个字符(一个空格, 一个数字),
- 为了实现以上想法, 必须获取键盘的
BackSpace
事件, 重写删除的逻辑 - 限制为数字, 隔四位加空格
import React, { Component } from 'react';
import './App.css';
// React组件准确捕捉键盘事件的demo
class App extends Component {
constructor(props) {
super(props)
this.state = {
showTxt: ""
}
this.inputRef = React.createRef();
this.changeShowTxt = this.changeShowTxt.bind(this);
}
// 为input绑定事件
componentDidMount(){
this.inputRef.current.addEventListener("keydown", (event)=>{
this.changeShowTxt(event);
});
// 默认聚焦input输入框
this.inputRef.current.focus()
}
// 处理键盘事件
changeShowTxt(event){
// 当输入删除键时
if (event.key === "Backspace") {
// 如果以空格结尾, 删除两个字符
if (this.state.showTxt.endsWith(" ")){
this.setState({showTxt: this.state.showTxt.substring(0, this.state.showTxt.length-2)})
// 正常删除一个字符
}else{
this.setState({showTxt: this.state.showTxt.substring(0, this.state.showTxt.length-1)})
}
}
// 当输入数字时
if (["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(event.key)){
// 如果当前输入的字符个数取余为0, 则先添加一个空格
if((this.state.showTxt.length+1)%5 === 0){
this.setState({showTxt: this.state.showTxt+' '})
}
this.setState({showTxt: this.state.showTxt+event.key})
}
}
render() {
return (
<div className="app">
<p>银行卡号 隔四位加空格 demo</p>
<input ref={this.inputRef} value={this.state.showTxt}/>
</div>
);
}
}
export default App;
小结:
虚拟Dom虽然能够提升网页的性能, 但虚拟 DOM 是拿不到用户输入的。为了获取文本输入框的一些操作, 还是js原生的事件绑定机制最好用~
- 【学习笔记】springboot教程(1)第一个demo
- Hyperledger Fabric 积分代币上链方案
- MySQL中的事务和锁简单测试(r10笔记第46天)
- 数据库无响应问题的紧急处理和分析 (r10笔记第42天)
- 【转载】记Golang数据库查询封装的坑
- Golang 基本语法学习笔记之流程控制
- Go 语言的演化历程
- JS 评分五角星随鼠标移动显示
- Golang标准库学习——buffio包 ---转
- 【Go 语言社区】Go语言条件变量的两个例子
- mysqlimport导入报错的排查(r10笔记第58天)
- 【Go 语言社区】POJ 1047 Round and Round We Go 循环数新解
- 【Go 语言社区】删除redis所有KEY
- 【Go 语言社区】Golang 动态实例化结构体
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解
- Bitmap的加载和Cache
- Python全栈 Linux基础之2.Linux终端命令简介
- Ubuntu系统 使用与开发 常见异常与解决办法
- 淘宝首页Bug!嵌套滑动及NestedScroll
- 曝光埋点方案:recyclerView中的item曝光逻辑实现
- Android中的动画全解!
- Python 爬取留言板留言(二):多线程版+selenium模拟
- 嵌套滑动通用解决方案--NestedScrollingParent2
- Python 爬取留言板留言(一):单进程版+selenium模拟
- Glide-图片加载框架全解(一)- 基本用法
- Python全栈(六)项目前导之1.Redis介绍及数据类型介绍
- 网络请求框架OkHttp3全解系列(一):OkHttp的基本使用
- 网络请求框架OkHttp3全解系列 - (二)OkHttp的工作流程分析
- 这次,我把Android事件分发机制翻了个遍