因此,如果您想更新父组件,
class ParentComponent extends React.Component {
constructor(props){
super(props);
this.state = {
page:0
}
}
handler(val){
console.log(val) // 1
}
render(){
return (
<ChildComponent onChange={this.handler} />
)
}
}
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
page:1
};
}
someMethod = (page) => {
this.setState({ page: page });
this.props.onChange(page)
}
render() {
return (
<Button
onClick={() => this.someMethod()}
> Click
</Button>
)
}
}
这里的onChange是一个属性,该属性的实例绑定了“ handler”方法。我们将方法处理程序传递给Child类组件,以通过其props参数中的onChange属性进行接收。
属性onChange将在props对象中设置,如下所示:
props ={
onChange : this.handler
}
并传递给子组件
因此,Child组件可以像这样的props.onChange一样访问props对象中的name值。
它是通过使用渲染道具来完成的。
现在,Child组件具有设置为onclick事件的按钮“ Click”,以调用在其props参数对象中通过onChnge传递给它的处理程序方法。所以现在this.props.onChange儿童持有父类的输出方法
参考和学分: 点点滴滴