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前端学习交流群21 598399936

 
posted @ 2017-12-04 13:37  噜噜修  阅读(204)  评论(0)  编辑  收藏  举报