子组件向父组件传递消息:在父组件中定义回调函数,加在子组件的属性上,子组件调用该方法给父组件传值
例子:
Father:
class Father extends React.Component {
constructor(props) {
super(props)
this.state = {
name: '我是die',
childMsg: 'zhangsan'
}
}
//父组件写一个回调函数
changename = (msg) =>{ //回调函数这个msg就是从子组件从获得的新的数据
this.setState({
childMsg:msg
})
}
render() {
return (
<div>
<h1>{this.state.name}</h1>,
<h3>name is:{ this.state.childMsg }</h3>,
<h2>get son</h2>,
<Son name = {'new boy'} getMsg = {this.changename}/> //将回调函数作为一个属性给子组件。这样子组件中就可以利用props得到这个属性进行操作
</div>
)
}
}```
Son:
```html
class Son extends React.Component {
constructor(props) {
super(props)
this.state = {
name: props.name,
msg: 'i die' //msg作为新的数据将要传递给Father
}
}
handClick = () => { //回调函数在这里进行体现应用;
this.props.getMsg(this.state.msg);
}
render() {
return (
<div>
<h1> {this.state.name}</h1>
<button onClick={this.handClick}>click to changename</button>
</div>
)
}
}
总的来说就是,father设定一个入口(回调函数),然后将这个入口点告诉son(props),son拿到这个属性后,找到入口进行操作。
仍然体现的是props数据自顶向下进行传递。