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

Posted 2023-02-23

【中文标题】无法正确地将值从父母传递给孩子和孩子传递给父母

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

【参考方案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

我更新了我的答案。你试过这样传递道具吗？