感觉与vue2.x的ref是一样的

1.首先使用字符串形式的ref

需求: 我需要两个input框一个是点击按钮时弹出输入值,一个是失去焦点时弹出输入值

 1 class App extends React.Component {
 2     showData1 = () => {
 3         // 为了this可以访问
 4         alert(this.refs.input1.value)
 5     }
 6     showData2 = () => {
 7         // 为了this可以访问
 8         alert(this.refs.input2.value)
 9     }
10     render() {
11         return (
12             <div>
13                 <input ref="input1" type="text" />
14                 <button onClick={this.showData1}>点击我</button>
15                 <input onBlur={this.showData2} ref="input2" type="text" />
16             </div>
17         )
18     }
19 }
20 ReactDOM.render(<App />, document.getElementById("app"))

 react中建议不要使用字符类型的ref并提示在未来会删除字符类型的ref

 

2.回调形式的ref

 1 class App extends React.Component{
 2     showData1 = () => { // 回调形式的ref将元素作为参数传给了实例化
 3         alert(this.input1.value) // 在实例化中可以直接访问input1
 4     }
 5     showData2 = () => {
 6         alert(this.input2.value)
 7     }
 8     render() {
 9         return(
10             <div>
11                 <input ref={ c => this.input1 = c } type="text" />
12                 <button onClick={ this.showData1 }>点击我</button>
13                 <input onBlur={ this.showData2 } ref={ c => this.input2 = c } type="text" />
14             </div>
15         )
16     }
17 }
18 ReactDOM.render(<App />, document.getElementById('app'))

在使用回调形式的ref时一定要注意其this的指向到底是谁

代码中 c 代表的是currentNode,当前节点,如果将箭头函数展开就是:

(c) => {this.input1 = c}

只是将当前元素作为参数赋值给了实例化对象的input1

注意:内联形式的回调ref有一个小问题,因为是在render函数里面当视图发生更新的时候会先设置成null再将元素当做是参数进行调用

// 内联形式
<input ref={ c => this.input1 = c } type="text" />
showData1 = () => {
    alert(this.input1.value)
}

// class的绑定函数形式
bindValue1 = (c) => {
    this.input1 = c
}
<input ref={ this.bindValue1 } type="text" />

 

3.createRef()使用ref

 1 class App extends React.Component {
 2     // 创建一个createRef容器
 3     value1 = React.createRef()
 4     value2 = React.createRef()
 5     showData1 = () => {
 6         alert(this.value1.current.value)
 7     }
 8     showData2 = () => {
 9         alert(this.value2.current.value)
10     }
11     render() {
12         return (
13             <div>
14                 <input ref={this.value1} type="text" />
15                 <button onClick={this.showData1}>点击我</button>
16                 <input onBlur={this.showData2} ref={this.value2} type="text" />
17             </div>
18         )
19     }
20 }
21 ReactDOM.render(<App />, document.getElementById("app"))

需要注意的是

React.createRef()调用后会返回一个容器且这个容器只能储存一个元素(后面的会覆盖前面的)

在取ref值时current这个对象值是固定的   createRef()方法是react官方推崇的