学习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 中介者模式实例
Dec 16 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
Vue头像处理方案小结
Jul 26 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP自动更新新闻DIY
2006/10/09 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
php中的观察者模式
2010/03/24 PHP
10个php函数实用却不常见
2015/10/13 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
javascript折半查找详解
2015/01/26 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python实现智能语音天气预报
2019/12/02 Python
关于numpy数组轴的使用详解
2019/12/05 Python
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
火车来了教学反思
2014/02/11 职场文书
投资合作协议书
2014/04/17 职场文书
创业融资计划书
2014/04/25 职场文书
语文教育专业求职信
2014/06/28 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
承诺函格式模板
2015/01/21 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技