学习React中ref的两个demo示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了学习React中ref的两个demo示例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2764字,纯文字阅读大概需要4分钟。
内容图文
![学习React中ref的两个demo示例](/upload/InfoBanner/zyjiaocheng/336/34a4caad32e249c98e76a7760dc12a4c.jpg)
为了摆脱繁琐的Dom操作, React提倡组件化, 组件内部用数据来驱动视图的方式,来实现各种复杂的业务逻辑 ,然而,当我们为原始Dom绑定事件的时候, 还需要通过组件获取原始的Dom, 而React也提供了ref为我们解决这个问题.
为什么不能从组件直接获取Dom?
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM
如果需要从组件获取真实 DOM 的节点,就要用到官方提供的ref属性
使用场景
当用户加载页面后, 默认聚焦到input框
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;
自动聚焦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 ( <div className="app"> <p>银行卡号 隔四位加空格 demo</p> <input ref={this.inputRef} value={this.state.showTxt}/> </div> ); } } export default App;
小结:
虚拟Dom虽然能够提升网页的性能, 但虚拟 DOM 是拿不到用户输入的。为了获取文本输入框的一些操作, 还是js原生的事件绑定机制最好用~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的学习React中ref的两个demo示例全部内容,希望文章能够帮你解决学习React中ref的两个demo示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。