亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

一文詳解React類組件中的refs屬性

 更新時(shí)間：2023年08月24日 10:58:45   作者：石小石Orz  
react中的ref類似于vue中的ref,都是可以操作dom的,這篇文章我們通過一個(gè)demo來學(xué)習(xí)這個(gè)屬性,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下

使用react實(shí)現(xiàn)input值的變化

我們使用類式組件實(shí)現(xiàn)如圖的一個(gè)簡單效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 準(zhǔn)備好一個(gè)“容器” -->
    <div id="test"></div>
    <!-- 引入react核心庫 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于將jsx轉(zhuǎn)為js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <!-- 引入組件標(biāo)簽類型聲明文件 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>
    <script type="text/babel">
      class Demo extends React.Component {
        addNum = () => {
          let dom = document.getElementById("input");
          dom.value++;
        };
        render() {
          return (
            <div>
              <input type="text" placeholder="請(qǐng)輸入數(shù)字" id="input" />
              <button onClick={this.addNum}>+</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>

上述代碼，我們通過在按鈕上綁定addNum事件實(shí)現(xiàn)這個(gè)效果，addNum內(nèi)我們直接操作了dom。

事實(shí)上，react也提供了ref屬性，幫助我們直接操作dom

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 準(zhǔn)備好一個(gè)“容器” -->
    <div id="test"></div>
    <!-- 引入react核心庫 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于將jsx轉(zhuǎn)為js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <!-- 引入組件標(biāo)簽類型聲明文件 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>
    <script type="text/babel">
      class Demo extends React.Component {
        addNum = () => {
          let dom = document.getElementById("input");
          dom.value++;
        };
        render() {
          return (
            <div>
              <input type="text" placeholder="請(qǐng)輸入數(shù)字" id="input" />
              <button onClick={this.addNum}>+</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>

上述代碼中，我們?cè)趇nput標(biāo)簽中使用 ref="input" 將其進(jìn)行標(biāo)識(shí)，然后通過 this.refs.input 直接獲取到了dom。

字符串ref

我們給input標(biāo)簽綁定ref后，我們觀察下類實(shí)例上發(fā)生了什么變化

class Demo extends React.Component {
  addNum = () => {
    // 這里的this指向Demo的實(shí)例化對(duì)象
    console.log(this);
  };
  render() {
    return (
      <div>
        <input type="text" placeholder="請(qǐng)輸入數(shù)字" ref="myInput" />
        <button onClick={this.addNum}>+</button>
      </div>
    );
  }
}

可以觀察到，this實(shí)例對(duì)象上的refs屬性多了一個(gè)myInput屬性，其值也是input

我們打印下myInput屬性的值

addNum = () => {
  // 這里的this指向Demo的實(shí)例化對(duì)象
  console.log(this.refs.myInput);
};

可以看到，myinput的屬性值就是input這個(gè)真實(shí)dom

這個(gè)示例中，我們通過ref="myInput" 對(duì)input標(biāo)簽進(jìn)行了標(biāo)識(shí)，標(biāo)識(shí)后的標(biāo)簽dom可以在實(shí)例對(duì)象的refs屬性中訪問到。通過這種方式創(chuàng)建的ref我們稱之為字符串類型ref。

注：這種方式已經(jīng)不被官方推薦，后續(xù)版本中會(huì)移除

回調(diào)形式的ref

回調(diào)形式的ref本質(zhì)是一個(gè)函數(shù)，下面是一個(gè)基本的示例

<script type="text/babel">
  class Demo extends React.Component {
    addNum = () => {
      const dom = this.myInput
      dom.value ++
    };
    render() {
      return (
        <div>
          <input type="text" placeholder="請(qǐng)輸入數(shù)字" ref={(dom)=>{this.myInput = dom}} />
          <button onClick={this.addNum}>+</button>
        </div>
      );
    }
  }
  ReactDOM.render(<Demo />, document.getElementById("test"));
</script>

在這個(gè)示例中，我們給ref綁定了一個(gè)函數(shù)，函數(shù)中，我們給this（類組件的實(shí)例上）創(chuàng)建了一個(gè)myinput屬性，并進(jìn)行了賦值。

我們可以先打印看看dom這個(gè)形參是什么東西

  <input type="text" placeholder="請(qǐng)輸入數(shù)字" ref={(dom)=>{console.log(dom);}} />

通過打印結(jié)果，我們能很明確的知道這個(gè)形參dom就是input這個(gè)dom本身。

那自然在addNum函數(shù)里，我們可以通過 this.myInput 拿到input這個(gè)dom，并通過 dom.value 實(shí)現(xiàn)其值的自增。

createRef

除了字符串ref及回調(diào)函數(shù)類型的ref，我們還可以使用createRef來實(shí)現(xiàn)上述操作，一個(gè)基本的demo如下

<script type="text/babel">
  class Demo extends React.Component {
    myRef = React.createRef();
    addNum = () => {
      this.myRef.current.value++;
    };
    render() {
      return (
        <div>
          <input type="text" placeholder="請(qǐng)輸入數(shù)字" ref={this.myRef} />
          <button onClick={this.addNum}>+</button>
        </div>
      );
    }
  }
  ReactDOM.render(<Demo />, document.getElementById("test"));
</script>

上述代碼中，我們?cè)陬愖陨砩蟿?chuàng)建了一個(gè)myRef屬性，其屬性值是React.createRef()創(chuàng)建的一個(gè)“容器”，然后，我們?cè)趇nput標(biāo)簽上通過ref={this.myRef}進(jìn)行了綁定。

我們觀察下this.myRef的屬性值

addNum = () => {
  console.log(this);
  this.myRef.current.value++;
};

可以看到，myRef的屬性內(nèi)包含一個(gè)current屬性，這是react內(nèi)置的，我們無法改變。

當(dāng)我們的有多個(gè)標(biāo)簽需要使用createRef函數(shù)時(shí)，需要給每個(gè)標(biāo)簽定義不同的“myRef”名稱。

到此這篇關(guān)于一文詳解React類組件中的refs屬性的文章就介紹到這了,更多相關(guān)React refs屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論