上一节中，我们是从父组件给子组件传送数据，要实现事件与数据的双向绑定，我们来看如何从子组件向父组件传送数据;
接触之前，我们看一些里面函数绑定的知识：
例：通过点击事件改变state的age属性值：
export default class ComponentFooter extends ponent{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 ponent{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 ponent{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 ponent{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> )} }
