React子组件向父组件传值

在使用React进行模块化开发时，常会遇到子组件向父组件传值的场景。对于复杂的组件间传值，使用 flux 或 redux 应该是最好的选择。除此之外，还有两种简易的选择，适用于简单的组件结构。

1. 父组件通过props传递用来控制state的回调，在子组件中调用

依赖 props 来传递事件的引用，并通过回调的方式来实现的，这样实现不是特别好，但在没有任何工具的情况下是一种简单的实现方式

/***实现在输入框输入邮箱时，在div中即时显示输入内容***/

    



//子组件
var Child = React.createClass({
    render: function(){
        return (
            

                邮箱：
            
        )
    }
});

//父组件
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            

                
邮箱：{this.state.email}
                
            
        )
    }
});
React.render(
  ,
  document.getElementById('test')
);

2. 通过context在子组件中获取和设置父组件暴露出来的属性值

子组件向父组件传值可以通过context, context可以跨级从父组件向子组件传值，也可以子组件来获取和设置父组件暴露出来的属性值。