一.父组件
import React from "react";
import Child from "./child";
export default class Parent extends React.Component {
constructor(props) {
super(props);
this.state={
message:'这是父组件',
name:'hanson',
age:55
}
}
callbackChild = (childMessage,childName,childAge) =>{
this.setState({
message:childMessage,
name:childName,
age:childAge
});
}
render() {
return(
<div>
<p>Message: {this.state.message}</p>
<Child callback={this.callbackChild} childName={this.state.name} childAge={this.state.age}></Child>
</div>
);
}
}
二.子组件
import React from "react";
export default class Child extends React.Component{
state ={
childMessage:'这是子组件',
childName:'jon',
childAge:'22'
}
change =() => {
this.props.callback(this.state.childMessage,this.state.childName,this.state.childAge);
}
render() {
return(
<div>
<p>我是{this.props.childName},年龄{this.props.childAge}</p>
<button onClick={this.change}>点击</button>
</div>
);
}
}