学习React中ref的两个demo示例


Posted in Javascript onAugust 14, 2018

为了摆脱繁琐的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动画演示

学习React中ref的两个demo示例

使用场景

为了更好的展示用户输入的银行卡号, 需要每隔四个数字加一个空格

实现思路:

当用户输入的字符个数, 可以被5整除时, 额外加一个空格

当用户删除数字时,遇到空格, 要移除两个字符(一个空格, 一个数字),

为了实现以上想法, 必须获取键盘的BackSpace事件, 重写删除的逻辑

限制为数字, 隔四位加空格

学习React中ref的两个demo示例 

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原生的事件绑定机制最好用~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 #Javascript
浅析Vue实例以及生命周期
Aug 14 #Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 #Javascript
详解angular应用容器化部署
Aug 14 #Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 #Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 #Javascript
You might like
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
JavaScript实现的九种排序算法
2019/03/04 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
用Python实现KNN分类算法
2017/12/22 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
户籍证明格式
2014/09/15 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
歌舞青春观后感
2015/06/10 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android