react中ref獲取dom或者組件如何實現

本篇文章和大家了解一下react中ref獲取dom或者組件如何實現。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

react中ref獲取dom或者組件方法

使用ref獲取DOM的引用

在vue中，如果想獲取DOM元素時，可以使用this.$refs.引用名稱

在react中也可以像vue中，有類似的寫法，如下

為元素添加ref引用

<h3 ref="test">這是h3標簽</h3>

在頁面上獲取元素

this.refs.test

使用ref獲取組件的引用

為組件添加ref引用

<Text ref="hellow"/>

在頁面上使用組件的引用

this.refs.hellow

注意點： 只要使用ref拿到組件的引用對象，它就是組件的實例對象，因此就可以調用這個組件的方法，或者它的屬性

react中的三種ref獲取DOM節點

第一種 ref字符串方式獲取Dom節點方式

已廢棄的原始方法

     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}>點擊顯示inpuDom</button>
        </div>
      )
    }
  }
  ReactDOM.render(<Dom/>,document.getElementById('root'))

第二種 回調式獲取Dom節點方式

開發常用

    class Dom extends React.Component{
    showInputDom = () =>{
      const {userNameInput} = this
      console.log(userNameInput);
    }
    render(){
      return (
        <div>
          {/*注釋 (currentNode)=>{this.userNameInput =currentNode} 這里邊的currentNode 為 當前的node節點 簡稱c */}
          {/*<input ref={(currentNode)=>{this.userNameInput =currentNode}} type="text"/>*/}
          <input ref={(c)=>{this.userNameInput = c}} type="text"/>
          <button onClick={this.showInputDom}>點擊顯示inpuDom</button>
        </div>
      )
    }
  }
  ReactDOM.render(<Dom/>,document.getElementById('root'))

第三種 回調式獲取Dom節點方式 掛在到自身實例

     class Dom extends React.Component{
    // 掛載到了自身實例上了
    userNameInput= (c) =>{
      this.input1 = c ;
      console.log(c);
    }
    render(){
      return (
        <div>
          {/*會在試圖更新時調用兩次 第一次賦值為null,第二次賦值為dom節點*/}
          {/*<input ref={(c)=>{this.userNameInput =c}} type="text"/>*/}
          {/*在試圖更新時不會調用}
          {/*<input ref={ this.userNameInput } type="text"/>*/}
          {/*注意這倆個方法是有區別的,這兩個對項目的影響可以忽略不記*/}
          <input ref={this.userNameInput} type="text"/>
          <button onClick={this.showInputDom}>點擊顯示inpuDom</button>
        </div>
      )
    }
  }
  ReactDOM.render(<Dom/>,document.getElementById('root'))

以上就是react中ref獲取dom或者組件如何實現的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注億速云行業資訊頻道哦！