🌟🌟🌟：react中的refs ---2019-4-10

本文摘自--《深入react技术栈》
refs的使用场景：
下面是几个适合使用 refs 的情况：
1.处理焦点、文本选择或媒体控制。
2.触发强制动画。
3.集成第三方 DOM 库

refs是组件中非常特殊的prop，可以附加到任何一个组件上，从字面意思来看，refs即reference，组件被盗用是会创建一个组件的实例，而refs就会指向这个实例。
它可以是一个回调函数，这个回调函数会在组件被挂载之后立即执行。

import React ,{Component}  from  "react";
class App extends Component {
     constructor(props){
          super(props)
  }
this.handleClick=this.handleClick.bind(this);
  handleClick(){
    if(this.myTextInput !==null){
        this.myTextInput.focus();
    }
    }
  render(){
          return(
    <div>
        <input ref={ (ref) => ({   this.myTextInput  =  ref  }) }/>
        <input  type="button"
         value="Focus the text input"
          onClick={this.handleClick}
/>
    </div>
)
    }
}

上面例子我们得到的是input组件的真实实例，所以我们在按钮按下后调用输入框的focus（）方法。