React ref獲取子組件的實例對象


reference可以在父組件中 直接得到子組件的實例對象(子--》父)

①指定ref
<son ref='mySon'></son>
②父組件通過ref調用子組件
this.refs.mySon

補充:
<input type='text' ref='myInput'/>
this.refs.myInput.value

<script type='text/babel'>
    // reference 引用 
     var Test = React.createClass({
       count:100,
       render:function(){
         return <div>
          <h2>這是一個子組件</h2>
         </div>
       }
     })

     var MyComponent = React.createClass({
       handleClick:function(){
         //借助於ref找到子組件做操作
        // console.log(this.refs.mySon.count)
           console.log(this.refs.mySon)
       },
       render:function(){
         return <div>
          <button onClick={this.handleClick}>獲取子組件數據</button>
          <Test ref='mySon'></Test>
         </div>
       }
     })

     ReactDOM.render(
       <MyComponent></MyComponent>,
       document.getElementById('example')
     )
  </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM