无法正确地将值从父母传递给孩子和孩子传递给父母答案

【问题标题】：Can't pass value from parent to child and child to parent properly无法正确地将值从父母传递给孩子和孩子传递给父母
【发布时间】：2020-07-22 19:30:52
【问题描述】：

首先，这是我目前的结构

父组件

    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 函数值传递给子组件。当我按下子组件上的 我已经有一个帐户 链接时，我想更改通过道具获得子组件的值并将其发送回父组件。我该怎么做？

【问题讨论】：

标签： reactjs class methods components

【解决方案1】：

Al Duncanson 但是现在出现了这个问题：'props' is not defined no-undef in RegisterBox.

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

我已经做到了。但是现在出现了这个问题： 'isLoginOpen' is not defined no-undef 'isRegisterOpen' is not defined no-undef 'showRegisterBox' is not defined
我更新了我的答案。你试过这样传递道具吗？