• <strong id="1re61"><div id="1re61"><cite id="1re61"></cite></div></strong>
    <noscript id="1re61"></noscript>

    1. <ruby id="1re61"><span id="1re61"></span></ruby><rp id="1re61"></rp>
        <ruby id="1re61"></ruby>

      1. <rp id="1re61"><legend id="1re61"><font id="1re61"></font></legend></rp>
        <video id="1re61"><ol id="1re61"></ol></video>
          溫馨提示×

          溫馨提示×

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

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

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

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

          本篇文章和大家了解一下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

          日本最新AV免费一区二区三区,CHINA宾馆露脸VIDEOS自拍,色综合久久久久综合一本到桃花网,端庄美妇董事长高潮