React子组件向父组件传值

最新推荐文章于 2024-10-06 01:40:02 发布

dbfgefai009910

最新推荐文章于 2024-10-06 01:40:02 发布

阅读量106

点赞数

原文链接：http://www.cnblogs.com/CCDS01/p/8028765.html

版权

本实例：子组件通过事件源告诉父组件自己的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

转载于:https://www.cnblogs.com/CCDS01/p/8028765.html