借助楼上的代码，做了个改良，下面的父子模块互相传递参数。
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(
下面的操作有惊喜
{this.state.username}
this.changeAge()}/>
)
}
}
class BodyChild extends React.Component{
render(){
return(
子页面输入：
)
}
}
ReactDOM.render(
document.getElementById('example')
);
尝试一下 »
BodyChild 组件的 render 函数返回值 jsx 中
的 value 是从父组件获取的 getname 这个变量值，onChange 获取的是 changeUsername 这个函数，所以如果文本框中的值改变了，改变值这个事件会触发 changeUsername 这个函数，这个函数会获得事件的值，即我们文本框修改后的值，并将其赋值给父组件的 state.username 这个变量。而父组件的这个变量改变后，state 随之改变，这时候，render 会重新启动，所以我们会看到修改后的值。
父组件的 jsx 中有一个箭头函数，有一个 bind 函数，这两者有什么区别吗？经验证，这两者是可以互换的。
onClick={this.changeAge.bind(this)} 和 onClick={()=>this.changeAge()} 可以互换。
独孤尚良 独孤尚良
yut***hanlin@qq.com
6年前 (2019-05-26)