ref
为我们解决这个问题.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 (
<div className="app">
<input ref={this.inputRef}/>
<p>当前输入的是: <span>{this.state.showTxt}</span></p>
</div>
);
}
}
export default App;
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 (
<div className="app">
<p>银行卡号 隔四位加空格 demo</p>
<input ref={this.inputRef} value={this.state.showTxt}/>
</div>
);
}
}
export default App;
虚拟Dom虽然能够提升网页的性能, 但虚拟 DOM 是拿不到用户输入的。为了获取文本输入框的一些操作, 还是js原生的事件绑定机制最好用~