1、字符串形式

這種字符出串寫法因為效率不好，所以不推薦使用

語法
標(biāo)簽上使用ref="name" 進行綁定
方法中this.refs.name拿到dom

<input ref="input1" type="text" placeholder="點擊按鈕彈出內(nèi)容" /> <button onClick={ this.showData }>按鈕</button> showData = () => {const { input1 } = this.refsalert(input1.value) }

2、回調(diào)的形式

ref會自動執(zhí)行回調(diào)函數(shù)，并注入一個參數(shù)currentNode（當(dāng)前節(jié)點）
更新組件時，refs會執(zhí)行兩次，第一次傳null，第二次傳入?yún)?shù)dom元素（并不會影響正常開發(fā)）
原因是每次渲染時都會定義一個新的函數(shù)實例，所以React清空舊的ref并且設(shè)置新的。
通過將ref的回調(diào)函數(shù)定義成class的綁定函數(shù)方式可以避免這個問題

語法
標(biāo)簽上使用ref={c=>this.name=c}
方法中this.name拿到dom

//正常寫法 <input ref={c => this.input1 = c } type="text" placeholder="點擊按鈕彈出內(nèi)容" /> <button onClick={ this.showData }>按鈕</button> showData = () => {const { input1 } = thisalert(input1.value) } //解決執(zhí)行兩次的問題 <input ref={this.demo} type="text" placeholder="class綁定的函數(shù)" /> demo=(c)=> {console.log(c,'123123') }

3、使用React.createRef

React.createRef調(diào)用后返回一個容器，該容器可以存儲被ref所標(biāo)識的節(jié)點，該容器只能給單個使用，重復(fù)的容器，會被覆蓋

語法
標(biāo)簽上使用ref={this.name}
給實例添加屬性input = React.createRef();

<input ref={this.input} type="text" placeholder="點擊按鈕彈出內(nèi)容" /><button onClick={ this.showData }>按鈕</button>showData = () => {alert(this.input.current.value)}

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的ref绑定dom的三种写法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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