欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

学习React中ref的两个demo示例

程序员文章站 2023-11-09 18:44:46
为了摆脱繁琐的dom操作, react提倡组件化, 组件内部用数据来驱动视图的方式,来实现各种复杂的业务逻辑 ,然而,当我们为原始dom绑定事件的时候, 还需要通过组件获取...

为了摆脱繁琐的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原生的事件绑定机制最好用~

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