學(xué)習(xí)React中ref的兩個(gè)demo示例

import React, { Component } from 'react';
import './App.css';

// React組件準(zhǔn)確捕捉鍵盤事件的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})
 })

 // 默認(rèn)聚焦input輸入框
 this.inputRef.current.focus()
 }

 render() {
 return (
 <div className="app">
 <input ref={this.inputRef}/>
 <p>當(dāng)前輸入的是: <span>{this.state.showTxt}</span></p>
 </div>
 );
 }
}

export default App;

import React, { Component } from 'react';
import './App.css';

// React組件準(zhǔn)確捕捉鍵盤事件的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);
 });
 // 默認(rèn)聚焦input輸入框
 this.inputRef.current.focus()
 }

 // 處理鍵盤事件
 changeShowTxt(event){
 // 當(dāng)輸入刪除鍵時(shí)
 if (event.key === "Backspace") {
 // 如果以空格結(jié)尾, 刪除兩個(gè)字符
 if (this.state.showTxt.endsWith(" ")){
 this.setState({showTxt: this.state.showTxt.substring(0, this.state.showTxt.length-2)})
 // 正常刪除一個(gè)字符
 }else{
 this.setState({showTxt: this.state.showTxt.substring(0, this.state.showTxt.length-1)})
 }

 }
 // 當(dāng)輸入數(shù)字時(shí)
 if (["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(event.key)){
 // 如果當(dāng)前輸入的字符個(gè)數(shù)取余為0, 則先添加一個(gè)空格
 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>銀行卡號(hào) 隔四位加空格 demo</p>
 <input ref={this.inputRef} value={this.state.showTxt}/>
 </div>
 );
 }
}

export default App;