React中ref的示例分析

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 (
   
    
    
当前输入的是: {this.state.showTxt}
   

自动聚焦input动画演示

使用场景

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

实现思路:

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

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

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

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

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 (
   
    
银行卡号 隔四位加空格 demo