1、字符串形式
这种字符出串写法因为效率不好，所以不推荐使用
语法
标签上使用ref="name" 进行绑定
方法中this.refs.name拿到dom
<input ref="input1" type="text" placeholder="点击按钮弹出内容" /> <button onClick={ this.showData }>按钮</button> showData = () => { const { input1 } = this.refs alert(input1.value) }
2、回调的形式
ref会自动执行回调函数，并注入一个参数currentNode（当前节点）
更新组件时，refs会执行两次，第一次传null，第二次传入参数dom元素（并不会影响正常开发）
原因是每次渲染时都会定义一个新的函数实例，所以React清空旧的ref并且设置新的。
通过将ref的回调函数定义成class的绑定函数方式可以避免这个问题
语法
标签上使用ref={c=>this.name=c}
方法中this.name拿到dom
//正常写法 <input ref={c => this.input1 = c } type="text" placeholder="点击按钮弹出内容" /> <button onClick={ this.showData }>按钮</button> showData = () => { const { input1 } = this alert(input1.value) }
//解决执行两次的问题 <input ref={this.demo} type="text" placeholder="class绑定的函数" /> demo=(c)=> { console.log(c,'123123') }
3、使用React.createRef
React.createRef调用后返回一个容器，该容器可以存储被ref所标识的节点，该容器只能给单个使用，重复的容器，会被覆盖
语法
标签上使用ref={this.name}
给实例添加属性input = React.createRef();
<input ref={this.input} type="text" placeholder="点击按钮弹出内容" /> <button onClick={ this.showData }>按钮</button> showData = () => { alert(this.input.current.value) }
