路边一娃 發表於 2021-2-3 22:46:00

react中React.createRef()的使用

<p>react中React.createRef()的使用</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;Hello World&lt;/title&gt;
    &lt;script type='text/javascript' src="./react.development.js"&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src="./react-dom.development.js"&gt;&lt;/script&gt;

    &lt;script type='text/javascript' src="./babel.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
    class Demo extends React.Component {
      // React.createRef() 调用后返回一个容器,该容器可以存储被ref标识的节点
      myRef = React.createRef()

      showData = () =&gt;{
      console.log(this.myRef)
   
      }
   
      render(){
      return (
          &lt;div&gt;
            &lt;input ref={this.myRef} placeholder="点击按钮提示数据"&gt;&lt;/input&gt;&nbsp;
             &lt;button onClick ={this.showData}&gt;点我&lt;/button&gt;&nbsp;
            
          &lt;/div&gt;
      )
      }
    }
      
      ReactDOM.render(&lt;Demo /&gt;,document.getElementById('root'))

    &lt;/script&gt;
   
&lt;/body&gt;
&lt;/html&gt;
</pre>
</div>
<p>  运行效果</p>
<p><img src="https://img2020.cnblogs.com/blog/1770392/202102/1770392-20210203224603150-1271548436.png" alt="" loading="lazy"></p><br><br>
来源:https://www.cnblogs.com/malong1992/p/14370177.html
頁: [1]
查看完整版本: react中React.createRef()的使用