无法将值从父级正确传递给孩子，也不能将孩子正确地传递给父级

Question

首先，这是我当前的结构

父组件

    class Box extends Component {
        constructor(){
            super()
            this.state={
                isLoginOpen: true,
                isRegisterOpen: false
            }
        }

        showLoginBox() {
            this.setState({
                isLoginOpen: true, 
                isRegisterOpen: false
            });
        }

        showRegisterBox() {
        this.setState({
            isRegisterOpen: true, 
            isLoginOpen: false
        });
        }
        render() {
            return  <div class="container-fluid w-100 full_div">
                <div class="container shadow">
                    <br/>
                    <br/>
                    <div class="row bg-white">
                        <div className={"col-sm-6 "+ (this.state.isLoginOpen? "bg-secondary": "")} 
                        >
                            <a onClick={()=>{this.showLoginBox()}} class="login-tab text-dark" href="#"><p class="text-center font-weight-bold" style={{fontSize: '25px'}}>Login</p></a>


        </div>
                    <div className={"col-sm-6 "+ (this.state.isLoginOpen? "": "bg-secondary")}>
                        <a onClick={()=>this.showRegisterBox()} class="signup-tab text-dark" href="#"><p class="active text-center font-weight-bold" style={{fontSize: '25px'}}>Sign Up</p></a>
                    </div>
                </div>
                <div class="col-md-6">
                    {
                        this.state.isLoginOpen?
                        <LoginBox/>
                        : <RegisterBox/>
                    }
                </div>
     }
}

儿童部分

class RegisterBox extends Component {
    render() {
        return  <div>
                     <p style={{marginTop: '40px'}}><a onclick="changeTab(this)" data-tab="login" className="login-tab text-dark" href="#">I already have an account</a></p> 
                    </div>;
    } 
}

我想将isLoginOpen，isRegisterOpen和showRegisterBox函数值传递给子组件。当我按下子组件上的我已经有一个帐户链接时，我想更改通过props到达子组件的值并将其发送回父组件。我该怎么做？

Answer 1

您可以通过类似的道具将这些值传递给子组件

<RegisterBox
  isLoginOpen={this.state.isLoginOpen}
  isRegisterOpen={this.state.isRegisterOpen}
  showRegisterBox={this.showRegisterBox}
/>

然后您可以像这样从子组件中调用showRegisterBox()函数

onClick={() => props.showRegisterBox()}