React中ref的使用方法

?

　　在react典型的數(shù)據(jù)流中，

props傳遞是父子組件交互的唯一方式；通過傳遞一個新的 props值來使子組件重新 re-render,從而達到父子組件通信。當然，就像react官網(wǎng)所描述的一樣，在react典型的數(shù)據(jù)量之外，某些情況下（例如和第三方的dom庫整合，或者某個dom元素focus等）為了修改子組件我們可能需要另一種方式，這就是 ref方式。

?

1.ref有兩種使用方法：

1）回調函數(shù)

標簽中：

<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.三種觸發(fā)回調函數(shù)的時機：

1）組件被渲染后

2）組件被卸載后

3）ref改變后

?

3.注：

　　使用ref必須用在【類型式的組件】才起作用，用在【函數(shù)式的組件】是無效的。

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的React中ref的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。