学习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 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
Three.js快速入门教程
Sep 09 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
谈谈新手如何学习PHP
2006/12/23 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
为你总结一些php信息函数
2015/10/21 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python中的默认参数实例分析
2018/01/29 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python: glob匹配文件的操作
2020/12/11 Python
妈妈的账单教学反思
2014/02/06 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
《学棋》教后反思
2014/04/14 职场文书
个人工作表现评价材料
2014/09/21 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
公司安全管理制度范本
2015/08/05 职场文书
高中数学教学反思范文
2016/02/18 职场文书
用python自动生成日历
2021/04/24 Python
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android