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