react子元件怎麼傳值給父元件？

react子元件傳送值至父元件的方法：在父元件中設定state的初始值以及處理該state的函數，同時將函數名稱透過以props屬性值的形式傳入子元件，子元件透過呼叫父元件的函數，進而引起state變化，達到在父元件中展示子元件所產生的變化。

本教學操作環境：windows7系統、React16版，此方法適用於所有品牌電腦。

相關推薦：《React影片教學》

子元件需要控制自己的state， 然後告訴父元件自己的state，透過props呼叫父元件中用來控制state的函數，在父元件中展示子元件的state變化。

/***实现在输入框输入邮箱时，在p中即时显示输入内容***/



  



//子组件
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 來傳遞事件的引用，並透過回呼的方式來實現的，這樣實作不是特別好，但在沒有任何工具的情況下都是一種簡單的實作方式。

分析：

React中當state發生改變時，元件才會update。在父元件中設定state的初始值以及處理該state的函數，同時將函數名稱透過以props屬性值的形式傳入子元件，子元件透過呼叫父元件的函數，進而引起state變化，達到在父組件中展示子組件產生的變化。

更多程式相關知識，請造訪：程式設計影片課程！ ！

以上是react子元件怎麼傳值給父元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！