• <samp id="hzfef"><rp id="hzfef"><bdo id="hzfef"></bdo></rp></samp>
    <pre id="hzfef"><s id="hzfef"></s></pre>

    <acronym id="hzfef"><label id="hzfef"></label></acronym>
    <acronym id="hzfef"></acronym>

    溫馨提示×

    溫馨提示×

    您好,登錄后才能下訂單哦!

    密碼登錄×
    登錄注冊×
    其他方式登錄
    點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

    發布時間:2023-12-13 11:17:26 來源:億速云 閱讀:242 作者:栢白 欄目:開發技術

    本篇文章和大家了解一下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或者組件如何實現的簡略介紹,當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多,歡迎關注億速云行業資訊頻道哦!

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    AI

    一级做A爰片久久毛片美女图片_99精品国产免费久久久久久_国产农村妇女毛片精品久久