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

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

該方法適用於所有品牌的電腦。

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

/***實現在輸入框輸入郵箱時，在p中即時顯示輸入內容***/


<body>
  <p id="test"></p>
</body>

//子元件
var Child = React.createClass({
  render: function(){
    return (
      <p>
        郵箱：<input onChange={this.props.handleEmail}/>
      </p>
    )
  }
});

//父元件
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: ''
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      <p>
        <p>郵箱：{this.state.email}</p>
        <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
      </p>
    )
  }
});
React.render(
 <Parent />,
 document.getElementById('test')
);

原理：

依賴 props 來傳遞事件的參照，並通過回撥的方式來實現的，這樣實現不是特別好，但在沒有任何工具的情況下是一種簡單的實現方式。

分析：

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

更多程式設計相關知識，請存取：！！

以上就是react子元件怎麼向父元件傳值？的詳細內容，更多請關注TW511.COM其它相關文章！