标题名很长,其实说白了就是——子组件传值给父组件,但我一开始觉得这两种情况是不一样的。
查了一下资料,这种情况有一个专用语“状态提升”。这是官方文档:https://doc.react-china.org/react/docs/lifting-state-up.html
基本思想就是在父组件中定义一个state(这里是value)和改变这个state的函数(这里是setValue),然后把这个函数(setValue)通过props传给子组件;
子组件直接通过props中传过来的函数来改变父组件中的value,最后父组件就可以直接用这个value。
class Child extends React.Component{
constructor() {
super();
this.state= {};
}
render(){
return(
<div onClick={()=>{this.props.setValue('aaa')}}></div>
)
class Parent extends React.Component{
constructor() {
super();
this.state= {value:''};
this.setValue=this.setValue.bind(this);
}
setValue(value) {
this.setState({
value
});
}
dosomething(){
console.log(this.state.value)
}
render(){
return(
<div>
<button onClick={()=>{this.dosomething()}}
<Child setValue={this.setValue}
</div>
)
}
网友评论