1、字符串形式

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

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

<input ref="input1" type="text" placeholder="點擊按鈕彈出內容" /> <button onClick={ this.showData }>按鈕</button> showData = () => {const { input1 } = this.refsalert(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 } = thisalert(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)}

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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