首页 > 其他 > 详细

react中React.createRef()的使用

时间:2021-02-03 23:27:51      阅读:32      评论:0      收藏:0      [点我收藏+]

react中React.createRef()的使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script type=‘text/javascript‘ src="./react.development.js"></script>
    <script type=‘text/javascript‘ src="./react-dom.development.js"></script>

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

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

    </script>
   
  </body>
</html>

  运行效果

技术分享图片

react中React.createRef()的使用

原文:https://www.cnblogs.com/malong1992/p/14370177.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!