本文介紹了React 子組件向父組件傳值的方法，分享給大家

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供明溪網(wǎng)站建設(shè)、明溪做網(wǎng)站、明溪網(wǎng)站設(shè)計、明溪網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、明溪企業(yè)網(wǎng)站模板建站服務，十余年明溪做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

子組件需要控制自己的 state， 然后告訴父組件自己的state，通過props調(diào)用父組件中用來控制state的函數(shù)，在父組件中展示子組件的state變化。

/***實現(xiàn)在輸入框輸入郵箱時，在div中即時顯示輸入內(nèi)容***/



  



//子組件
var Child = React.createClass({
  render: function(){
    return (
      

        郵箱：
      
    )
  }
});

//父組件
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: ''
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      

        
郵箱：{this.state.email}
        
      
    )
  }
});
React.render(
 ,
 document.getElementById('test')
);

原理：

依賴 props 來傳遞事件的引用，并通過回調(diào)的方式來實現(xiàn)的，這樣實現(xiàn)不是特別好，但在沒有任何工具的情況下是一種簡單的實現(xiàn)方式。

分析：

React中當state發(fā)生改變時，組件才會update。在父組件中設(shè)定state的初始值以及處理該state的函數(shù)，同時將函數(shù)名通過以props屬性值的形式傳入子組件，子組件通過調(diào)用父組件的函數(shù)，進而引起state變化，達到在父組件中展示子組件產(chǎn)生的變化。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。