ref的使用

ref在react中可以获取一个DOM节点，这点和vue很类似，但是用法不同，下面上例子：

我们在写一个input标签的onChange事件时，通常都是这么写：

<input id='ipt' onChange='this.handleInputChange'/>

handleInputChange:(e)=>{
 console.log(e.target) //输出<input id='ipt' value=''/>DOM本身
 const inputValue = e.target.value
 this.setState({
   inputValue: inputValue
 })
}

那么e.target就是input的DOM本身，我们可以用ref来获取它

<input id='ipt' 
          onChange='this.handleInputChange'
          ref={(input)=>{this.input = input}}
/>

这样this.input就成功的指向了input的DOM节点，然后我们的代码可以改写成这样：

handleInputChange:()=>{
  console.log(this.input) //输出<input id='ipt' value=''/>DOM本身
  const inputValue = this.input.value
  this.setState({
    inputValue: inputValue
  })
}

但是官方也建议大家尽量不要使用ref，尽量不用去直接操作DOM，除非真的遇到特殊情况不得不用。