react ref属性之获取Dom对象

众所周知 React 支持一个特殊的、可以附加到任何组件上的 ref 属性。 ​

我们通常呢用它来获取DOM对象，用法呢也很简单，我下面通过两个例子给大家整个绝活--获取DOM和获取后代DOM

首先呢，我们需要明白ref在获取dom上有两个功能：

(1) 如果ref属性值是{current:null},就将当前DOM对象赋值给{current:DOM对象}

(2) 如果ref属性是el=>{}回调函数，就调用这个回调函数，将DOM对象当做参数传递

OK下面是案例

而获取后代DOM呢也很简单我用代码给大家演示一下：

//父组件
import React, { Component } from 'react'
import Child from './Child'
export default class App extends Component {
  constructor(){
    super();
    this.myinput=React.createRef(); //获得Dom 但是null 需要ref 绑定dom
  }
  oclick=()=>{
    this.myinput.current.focus();
  }
  render() {
    return (
      <div>
        <button onClick={this.oclick}>按钮</button>
        <Child  inMyRef={(el)=>{
          this.myinput.current=el;  
        }} />
      </div>
    )
  }
}

//子组件
import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                <input type="text" ref={this.props.inMyRef} />
            </div>
        )
    }
}

我们通过绑定回调函数来获取后代的DOM这样就可以做到，点击获取后代的Dom了非常方便。