react子组件向父组件传值

子组件向父组件传值,注意父组件传递函数的时候必须绑定this到当前父组件(handleEmail={this.handleEmail.bind(this)}),不然会报错

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


<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')
);
原文地址:https://www.cnblogs.com/lanshu123/p/10621975.html