React子組件向父組件傳值

時間 2019-11-24

標籤 react 組件欄目 React 简体版

原文原文鏈接

本實例：子組件經過事件源告訴父組件本身的state，經過props調用父組件中用來控制state的函數，在父組件中展現子組件的state變化。前端

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

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

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

更多學習資料，加WEB前端互動交流羣434623999函數

相關標籤/搜索