学习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中实现命名空间
Nov 23 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
捕获关闭窗口的脚本
Jan 10 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
React中的render何时执行过程
Apr 13 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
通过html表格发电子邮件
2006/10/09 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
Python入门篇之对象类型
2014/10/17 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
关于Python-faker的函数效果一览
2019/11/28 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
韩语专业本科生求职信
2013/10/01 职场文书
管理心得体会
2013/12/28 职场文书
店面销售职位的职责
2014/03/09 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers