前端之家收集整理的这篇文章主要介绍了
学习React中ref的两个demo示例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
为了摆脱繁琐的Dom操作,React提倡组件化,组件内部用数据来驱动视图的方式,来实现各种复杂的业务逻辑,然而,当我们为原始Dom绑定事件的时候,还需要通过组件获取原始的Dom,而React也提供了ref为我们解决这个问题.
为什么不能从组件直接获取Dom?
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM
如果需要从组件获取真实 DOM 的节点，就要用到官方提供的ref属性
使用场景
当用户加载页面后,默认聚焦到input框
// 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">
当前输入的是: {this.state.showTxt}
);
}
}
export default App;
// 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">
银行卡号 隔四位加空格 demo
