学习React中ref的两个demo示例

import React, { Component } from 'react';import './App.css';// React组件准确捕捉键盘事件的democlass 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;

import React, { Component } from 'react';import './App.css';// React组件准确捕捉键盘事件的democlass 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;