Javascript 将状态从子组件传递到父组件

我有2个jsx文件

如何从Child.jsx在Parent.jsx中获得这个.props.result

文件Child.jsx:

class Child extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            result: 'logout'
        };
        this.login_action = this.login_action.bind(this);
        this.logout_action = this.logout_action.bind(this);
    }

    login_action(){
        this.setState({result: 'login'})
    }

    logout_action(){
        this.setState({result: 'logout'})
    }

    render(){
        return(
            <div>
                <h1>{this.state.status}</h1>
                <button onClick={this.login}>Login</button>
                <button onClick={this.logout}>Logout</button>
            </div>
        )
    }
}

 class Parent extends React.Component {
     render () {
        if(this.props.result.localeCompare("login") > -1){
            return(<Child  status="logout" />)
        }else{
            return(<Child  status="logout"/>)
        }
     }
 }
 render(<Parent/>, document.getElementById('app'));

类子级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
结果：“注销”
};
this.login\u action=this.login\u action.bind（this）；
this.logout\u action=this.logout\u action.bind（this）；
}
登录操作（）{
this.setState（{result:'login'}）
}
注销操作（）{
this.setState（{result:'logout'}）
}
render（）{
返回(
{this.state.status}
登录
注销
)
}
}

导出默认子对象

文件Parent.jsx:

class Child extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            result: 'logout'
        };
        this.login_action = this.login_action.bind(this);
        this.logout_action = this.logout_action.bind(this);
    }

    login_action(){
        this.setState({result: 'login'})
    }

    logout_action(){
        this.setState({result: 'logout'})
    }

    render(){
        return(
            <div>
                <h1>{this.state.status}</h1>
                <button onClick={this.login}>Login</button>
                <button onClick={this.logout}>Logout</button>
            </div>
        )
    }
}

 class Parent extends React.Component {
     render () {
        if(this.props.result.localeCompare("login") > -1){
            return(<Child  status="logout" />)
        }else{
            return(<Child  status="logout"/>)
        }
     }
 }
 render(<Parent/>, document.getElementById('app'));

类父级扩展React.Component{
渲染（）{
if（this.props.result.localeCompare（“登录”）>-1）{
返回（）
}否则{
返回（）
}
}
}
render（，document.getElementById（'app'））；

您需要将回调函数从父级传递给子级。像这样：

Parent.jsx

class Parent extends React.Component {

  render () {

    if(this.props.result.localeCompare("login") > -1){
        return(<Child onResultChange={(res) => this.onResultChange(res)} status="logout" />)

    }else{
        return(<Child onResultChange={(res) => this.onResultChange(res)} status="logout"/>)

    }
  }

  onResultChange(newResult) {
    //do what you need with new result value here
  }
 }
 render(<Parent/>, document.getElementById('app'));

类父级扩展React.Component{
渲染（）{
if（this.props.result.localeCompare（“登录”）>-1）{
return（this.onResultChange（res）}status=“logout”/>）
}否则{
return（this.onResultChange（res）}status=“logout”/>）
}
}
onResultChange（新结果）{
//使用此处的新结果值执行所需操作
}
}
render（，document.getElementById（'app'））；

Child.jsx

constructor(props) {
    super(props);
    this.state = {
        result: 'logout'
    };
    this.login_action = this.login_action.bind(this);
    this.logout_action = this.logout_action.bind(this);

    }

    login_action(){
        this.setState({result: 'login'});
        this.props.onResultChange('login');
    }

    logout_action(){
        this.setState({result: 'logout'});
        this.props.onResultChange('logout');
    }

    render(){
        return(
        <div>
            <h1>{this.state.status}</h1>
            <button onClick={this.login}>Login</button>
            <button onClick={this.logout}>Logout</button>
        </div>
    )
}

构造函数（道具）{
超级（道具）；
此.state={
结果：“注销”
};
this.login\u action=this.login\u action.bind（this）；
this.logout\u action=this.logout\u action.bind（this）；
}
登录操作（）{
this.setState（{result:'login'}）；
this.props.onResultChange（'login'）；
}
注销操作（）{
this.setState（{result:'logout'}）；
this.props.onResultChange（'logout'）；
}
render（）{
返回(
{this.state.status}
登录
注销
)
}

如文档所述

在React中，共享状态是通过将其向上移动到需要它的组件的最接近的公共祖先来实现的。这被称为“提升状态”。（）

---

您应该将“结果”状态移动到父组件。有关从代码中提升状态的示例，请参见此。

代码中存在一些问题。在Child.jsx中，按钮点击处理程序应该是

{this.login\u action}

和

{this.logout\u action}

，并且在Parent.jsx中，如果在elseCode部件格式中返回相同的内容。