react中ref獲取dom或者組件的實(shí)現(xiàn)方法
更新時(shí)間：2023年05月12日 09:52:24 作者：海闊天空BM
這篇文章主要介紹了react中ref獲取dom或者組件的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
react中ref獲取dom或者組件方法
使用ref獲取DOM的引用
在vue中，如果想獲取DOM元素時(shí)，可以使用this.$refs.引用名稱
在react中也可以像vue中，有類似的寫法，如下
為元素添加ref引用
<h2 ref="test">這是h2標(biāo)簽</h2>
在頁面上獲取元素
this.refs.test
使用ref獲取組件的引用
為組件添加ref引用
<Text ref="hellow"/>
在頁面上使用組件的引用
this.refs.hellow
注意點(diǎn)： 只要使用ref拿到組件的引用對(duì)象，它就是組件的實(shí)例對(duì)象，因此就可以調(diào)用這個(gè)組件的方法，或者它的屬性
react中的三種ref獲取DOM節(jié)點(diǎn)
第一種 ref字符串方式獲取Dom節(jié)點(diǎn)方式
已廢棄的原始方法
?? ? class Dom extends React.Component{
? ? showInputDom = () =>{
? ? ? const {userNameInput} = this.refs
? ? ? console.log(userNameInput);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? <input ref="userNameInput" type="text"/>
? ? ? ? ? <button onClick={this.showInputDom}>點(diǎn)擊顯示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById('root'))第二種 回調(diào)式獲取Dom節(jié)點(diǎn)方式
開發(fā)常用
?? ?class Dom extends React.Component{
? ? showInputDom = () =>{
? ? ? const {userNameInput} = this
? ? ? console.log(userNameInput);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? {/*注釋 (currentNode)=>{this.userNameInput =currentNode} 這里邊的currentNode 為 當(dāng)前的node節(jié)點(diǎn) 簡(jiǎn)稱c */}
? ? ? ? ? {/*<input ref={(currentNode)=>{this.userNameInput =currentNode}} type="text"/>*/}
? ? ? ? ? <input ref={(c)=>{this.userNameInput = c}} type="text"/>
? ? ? ? ? <button onClick={this.showInputDom}>點(diǎn)擊顯示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById('root'))第三種 回調(diào)式獲取Dom節(jié)點(diǎn)方式 掛在到自身實(shí)例
?? ? class Dom extends React.Component{
? ? // 掛載到了自身實(shí)例上了
? ? userNameInput= (c) =>{
? ? ? this.input1 = c ;
? ? ? console.log(c);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? {/*會(huì)在試圖更新時(shí)調(diào)用兩次 第一次賦值為null,第二次賦值為dom節(jié)點(diǎn)*/}
? ? ? ? ? {/*<input ref={(c)=>{this.userNameInput =c}} type="text"/>*/}
? ? ? ? ? {/*在試圖更新時(shí)不會(huì)調(diào)用}
? ? ? ? ? {/*<input ref={ this.userNameInput } type="text"/>*/}
? ? ? ? ? {/*注意這倆個(gè)方法是有區(qū)別的,這兩個(gè)對(duì)項(xiàng)目的影響可以忽略不記*/}
? ? ? ? ? <input ref={this.userNameInput} type="text"/>
? ? ? ? ? <button onClick={this.showInputDom}>點(diǎn)擊顯示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById('root'))總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
新建的React Native就遇到vscode報(bào)警解除方法
這篇文章主要為大家介紹了新建的React Native就遇到vscode報(bào)警解除方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react?component?function組件使用詳解
這篇文章主要為大家介紹了react?component?function組件的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
關(guān)于useEffect的第二個(gè)參數(shù)解讀
這篇文章主要介紹了關(guān)于useEffect的第二個(gè)參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了詳解react如何在組件中獲取路由參數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
詳解三種方式在React中解決綁定this的作用域問題并傳參
這篇文章主要介紹了詳解三種方式在React中解決綁定this的作用域問題并傳參，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
React中setState同步異步場(chǎng)景的使用
本文主要介紹了React中setState同步異步場(chǎng)景的使用，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹了react中事件處理與柯里化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了React中使用UMEditor的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
React+umi+typeScript創(chuàng)建項(xiàng)目的過程
這篇文章主要介紹了React+umi+typeScript創(chuàng)建項(xiàng)目的過程,結(jié)合代碼介紹了項(xiàng)目框架搭建的方式，本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
一百多行代碼實(shí)現(xiàn)react拖拽hooks
這篇文章主要介紹了一百多行代碼實(shí)現(xiàn)react拖拽hooks，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03