react的ref三种使用方式，获取元素内容。
注意：应尽可能少的使用ref，优先使用state
1.字符串
refGetData1=()=>{
alert("获取到的内容："+this.refs.div1.innerText);
}
<div ref='div1' onClick={this.refGetData1}>点我是ref字符串方式</div>
2.回调函数（推荐）
refGetData2=()=>{
alert("获取到的内容："+this.refData2.innerText);
}
<div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}>点我是回调函数的方式</div>
3.React.createRef() ，react16.3新增方法
constructor(props){
super(props)
this.refData3=React.createRef() // react16.3扩展的新方法，原理是将值赋给变量，通过ref挂载在节点或组件上，使用ref的current属性拿到节点
}
refGetData3=()=>{
alert("获取到的内容："+this.refData3.current.innerText);
}
<div ref={this.refData3} onClick={this.refGetData3}>点我通过React.createRef()获取我的内容，这是react16.3新增的方法，原理是将值赋给变量，通过ref挂载到节点或组件上，使用ref的current属性拿到节点</div>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id='test'></div>
<script type='text/babel'>
class Test extends React.Component{
constructor(props){
super(props)
this.refData3=React.createRef() // react16.3扩展的新方法，原理是将值赋给变量，通过ref挂载在节点或组件上，使用ref的current属性拿到节点
}
refGetData1=()=>{
alert("获取到的内容："+this.refs.div1.innerText);
}
refGetData2=()=>{
alert("获取到的内容："+this.refData2.innerText);
}
refGetData3=()=>{
alert("获取到的内容："+this.refData3.current.innerText);
}
render(){
return(
<div>
<div ref='div1' onClick={this.refGetData1}>点我是ref字符串方式</div>
<div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}>点我是回调函数的方式</div>
<div ref={this.refData3} onClick={this.refGetData3}>点我通过React.createRef()获取我的内容，这是react16.3新增的方法，原理是将值赋给变量，通过ref挂载到节点或组件上，使用ref的current属性拿到节点</div>
</div>
)
}
}
ReactDOM.render(<Test/> ,document.getElementById('test'))
</script>
</body>
</html>
