React 父子模块互相传递参数

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/15.4.2/react.min.js"></script>
<script src="https://cdn.staticfile.org/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class CptBody extends React.Component{
    constructor(){
        super();
        this.state = {username : 1}; //可以传json等很多格式（这个是初始化赋值）
    }
    //click事件函数
    changeAge(){
        this.setState({username:1+this.state.username})
    }
    //change事件函数
    changeUsername(event){
        this.setState({username:parseInt(event.target.value)})
    }
    render(){
       return(
            <div>
                <h1>下面的操作有惊喜</h1>
                <p>{this.state.username}</p>
                <input type="button" value="点击改变username" onClick={()=>this.changeAge()}/>
                <BodyChild changeUsername={this.changeUsername.bind(this)} getname={this.state.username}/>
            </div>
        )
    }
}
​
​
class BodyChild extends React.Component{
    render(){
        return(
            <div>
                <p>子页面输入：<input type='text' value={this.props.getname} onChange={this.props.changeUsername} /></p>
​
            </div>
        )
    }
}
ReactDOM.render(
    <CptBody  />,
    document.getElementById('example')
);
</script>
</body>
</html>
HTML