版权声明：转载请注明作者（独孤尚良dugushangliang）出处： https://blog.csdn.net/dugushangliang/article/details/90577356
参阅https://www.runoob.com/react/react-props.html并调试代码如下：
<!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>BodyChild组件的render函数返回值jsx中<p>的value是从父组件获取的getname这个变量值，onChange获取的是changeUsername这个函数，所以如果文本框中的值改变了，改变值这个事件会触发changeUsername这个函数，这个函数会获得事件的值，即我们文本框修改后的值，并将其赋值给父组件的state.username这个变量。而父组件的这个变量改变后，state随之改变，这时候，render会重新启动，所以我们会看到修改后的值。
父组件的jsx中有一个箭头函数，有一个bind函数，这两者有什么区别吗？经验证，这两者是可以互换的。
onClick={this.changeAge.bind(this)}和onClick={()=>this.changeAge()}可以互换。本例代码在“菜鸟教程在线编辑器”中运行。
独孤尚良dugushangliang——著
