React中ref的使用方法

Posted 2020-11-21 michelle20180227

React中ref的使用方法

 

　　在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是ref方式。

 

1.ref有两种使用方法：

1）回调函数

标签中：<input type="text" className="form-control" ref={ref => this.name = ref}/>

使用：let name=this.name.value;

 

2）字符串

标签中：<input type="text" className="form-control" ref="name"/>

使用：let name=this.refs.name.value;

 

2.三种触发回调函数的时机：

1）组件被渲染后

2）组件被卸载后

3）ref改变后

 

3.注：

　　使用ref必须用在【类型式的组件】才起作用，用在【函数式的组件】是无效的。