为了摆脱繁琐的 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 事件, 重写删除的逻辑
限制为数字, 隔四位加空格
小结:
虚拟 Dom 虽然能够提升网页的性能, 但虚拟 DOM 是拿不到用户输入的. 为了获取文本输入框的一些操作, 还是 js 原生的事件绑定机制最好用~
来源: http://www.jianshu.com/p/c6296456f6da