上一节中，我们是从父组件给子组件传送数据，要实现事件与数据的双向绑定，我们来看如何从子组件向父组件传送数据;
接触之前，我们看一些里面函数绑定的知识：
例：通过点击事件改变state的age属性值：
export default class ComponentFooter extends React.Component{
constructor(){
super();
this.state = {
username:"azedada",
age:24
}
}
//事件函数 改变state的age
changeAge(){
this.setState({age:18})
}
render(){
return(
<div>
<h1>这里是底部</h1>
<p>{this.state.username}:{this.state.age},{this.props.userId}</p>
{/*这里写点击事件，注意写法是es6*/}
<input type="button" value="点击改变年龄" onClick={this.changeAge.bind(this)}/>
</div>
)
}
//运行结果 24变为18
}
接下来，我们看如何从子组件向父组件传送数据，
建立一个BodyIndex的子组件：bodychild，现在做的是在子组件bodychild更改的内容立马反馈更新到BodyIndex;
例：这个子页面是bodychild.js
import React from 'react';
export default class BodyChild extends React.Component{
render(){
return(
<div>
{/*子页面向父页面传递参数，只能通过事件的形式，调用父页面props传过来的参数，这个参数是一个事件函数
我们在父页面定义这个函数，并且接收原生函数定义好的event这个参数*/}
<p>子页面输出：<input type='text' onChange={this.props.changeUsername}/></p>
</div>
)
}
}
重点：子页面向父页面传递参数，只能通过事件的形式，调用父页面props传过来的参数，这个参数是一个事件函数；我们在父页面定义这个函数，并且接收原生函数定义好的event这个参数；
下面是父页面BodyIndex.js
import React from 'react';
import ReactDOM from 'react-dom';
//将子页面bodychild引用进来
import BodyChild from './bodychild.js'; export default class BodyIndex extends React.Component{
constructor(){
super();
this.state = {username : "azedada"} } //定义事件函数，通过子页面bodychild对username的改变，将显示出来的username改变;
changeUsername(event){
this.setState({username:event.target.value})
} render(){
return(
<div>
<h1>这里是主体容部分</h1>
{/*显示主页面的username的值*/}
<p>username：{this.state.username}</p>
{/*下面是子页面组件，在这里输入内容，将改变username的值*/}
<BodyChild changeUsername={this.changeUsername.bind(this)}/>
</div>
)
}
}
以上就是子组件向父组件传送数据;
扩展:在子组件可以向父组件传送数据的时候，父组件通过点击事件，实现将这个数据改为定值，如何操作：
添加点击事件，进行传参即可：
import React from 'react';
import ReactDOM from 'react-dom';
//将子页面bodychild引用进来
import BodyChild from './bodychild.js'; export default class BodyIndex extends React.Component{
constructor(){
super();
this.state = {username : "azedada"} }
//父组件点击事件
recover(str){
this.setState({username:str})
} //定义子组件事件函数，通过子页面bodychild对username的改变，将显示出来的username改变;
changeUsername(event){
this.setState({username:event.target.value})
} render(){
return(
<div>
<h1>这里是主体容部分</h1>
{/*显示主页面的username的值*/}
<p>username：{this.state.username}</p>
{/*下面是子页面组件，在这里输入内容，将改变username的值*/}
<BodyChild changeUsername={this.changeUsername.bind(this)}/>
{/*点击将username变为"azedada",在bind()进行传参*/}
<input type="button" value="点击恢复" onClick={this.recover.bind(this,"azedada")}/>
</div>
)
}
}