仅在单击输入时才在反应负载中进行叠加

Question

我使用@WitVault 的code 在单击“添加数据”按钮时显示叠加层；它工作正常，但只要页面加载，覆盖就会加载。我必须关闭覆盖才能看到我的主要内容。

我希望覆盖仅在单击按钮时出现，而不是在页面加载时出现。这是我的代码：

class registration extends Component{
        constructor(props) {
            super(props);
            this.state = {
                style : {
                    width : "100%"
                }
            };
            this.openNav = this.openNav.bind(this);
            this.closeNav = this.closeNav.bind(this);

        }

        componentDidMount() {
            document.addEventListener("click", this.closeNav);
        }

        componentWillUnmount() {
            document.removeEventListener("click", this.closeNav);
        }

        openNav() {


            const style = { width : "100%" };
            this.setState({ style });
            document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
            document.addEventListener("click", this.closeNav);
        }

        closeNav() {
            document.removeEventListener("click", this.closeNav);
            const style = { width : 0 };
            this.setState({ style });
            document.body.style.backgroundColor = "#F3F3F3";
        }



        render(){
        return(


            <div class="encloser" id="test1">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
                <div>
                    <div class="addbuttondiv">

                        <button class="addbutton" onClick={this.openNav}>Add Data</button>
                        <div ref="snav" className = "overlay" style={this.state.style}>
                <div className = "sidenav-container">
                    <div className = "text-center">
                      <h2>Form</h2>
                      <p>This is a sample input form</p>
                    </div>
                    <a  href      = "javascript:void(0)"
                        className = "closebtn"
                        onClick   = {this.closeNav}
                    >
                        ×
                    </a>

                </div>
            </div>
                    </div>
</div>

//some html content
</div>



            );
        }

}

export default registration;

CSS：

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }


  .overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }

  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }

  /* When the height of the screen is less than 450 pixels, 
  change the font-size of the links and position the close button again, so they don't overlap */

  @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
    }
  }

Answer 1

您必须在构造函数中将宽度设置为“0”，如下所示：

class registration extends Component{
    constructor(props) {
        super(props);
        this.state = {
            style : {
                width : "0"
            }
        };
        this.openNav = this.openNav.bind(this);
        this.closeNav = this.closeNav.bind(this);

    }

    componentDidMount() {
        document.addEventListener("click", this.closeNav);
    }

    componentWillUnmount() {
        document.removeEventListener("click", this.closeNav);
    }

    openNav() {


        const style = { width : "100%" };
        this.setState({ style });
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        document.addEventListener("click", this.closeNav);
    }

    closeNav() {
        document.removeEventListener("click", this.closeNav);
        const style = { width : 0 };
        this.setState({ style });
        document.body.style.backgroundColor = "#F3F3F3";
    }



    render(){
    return(


        <div class="encloser" id="test1">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
            <div>
                <div class="addbuttondiv">

                    <button class="addbutton" onClick={this.openNav}>Add Data</button>
                    <div ref="snav" className = "overlay" style={this.state.style}>
            <div className = "sidenav-container">
                <div className = "text-center">
                  <h2>Form</h2>
                  <p>This is a sample input form</p>
                </div>
                <a  href      = "javascript:void(0)"
                    className = "closebtn"
                    onClick   = {this.closeNav}
                >
                    ×
                </a>

            </div>
        </div>
                </div>
</div>
//some html content
</div>



        );
    }

}

export default registration;