事件与数据的双向绑定

事件与数据的双向绑定

bodyIndex.js代码
import React from 'react';
import BodyChild from './bodychild'
export default class BodyIndex extends React.Component {
constructor() {
super(); //调用基类的所有的初始化方法
this.state = {
username: "Parry",
age:20
};//初始化赋值
}

handleChildValueChange(event){
this.setState({age:event.target.value});//取出子页面的值
}

changeUserInfo(){
this.setState({age:50});
};

render() {
return (
div>
h2>页面主题内容/h2>
p>{this.state.username} {this.state.age} {this.props.userid} {this.props.username}</p
p>age: {this.state.age}</p
input type="button" value="提交" onClick={this.changeUserInfo.bind(this)}/>
BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>
</div
)
}
}
bodychild.js代码
import React from 'react';
export default class BodyChild extends React.Component{

render() {
return(
div>
p>子页面输入：input type="text" onChange={this.props.handleChildValueChange}/></p
</div
)
}
}
通过在子页面BodyChild设置props，子页面value改变调用handleChildValueChange，传值到父页面bodyIndex。也就是说在子页面中通过调用父页面传递过来的事件props进行组件间的参数传递。
思考（onChange与onBlur）的对比。
ES6的语法注意
函数绑定方法this ：this.forceUpdateHander = this.forceUpdateHander.bind(this)
或者调用时绑定：onClick={this.changeUserInfo.bind(this,50)}