React子组件向父组件传值

22guanerye123

于 2017-12-04 13:33:45 发布

阅读量2.3k

点赞数

本实例：子组件通过事件源告诉父组件自己的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前端学习交流群21 598399936