在输入中单击输入时显示覆盖

Question

单击某个“输入”字段时，我试图显示一个覆盖图。我正在这样做。我怎样才能做到这一点？

这是我的代码

import React, { Component } from 'react';
import cam from '../../Resources/img/cam.png';
import SinglePost from '../../Components/Post/single_post';

class Middle extends Component {

    constructor(props) {
        super(props);
        this.state = {
            posts: []
        }
    }

    render() {

        function popup_ques(e) {
            e.preventDefault();
            alert("now the overlay should appear");
        }

        return (
            <div className="middle_div">

                <input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={popup_ques}/>

            </div>
        );
    }
}

export default Middle;

我应该采取什么方法？

Answer 1

我创建了一个样本react组件。我希望这会以某种方式帮助您实现您想要的。

class Test extends React.Component {



    constructor(props) {

        super(props);

        this.state = {

            style : {

                width : 350

            }

        };

        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 : 350 };

        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>

          <h2>Fullscreen Overlay Nav Example</h2>

<p>Click on the element below to open the fullscreen overlay navigation menu.</p>

<p>In this example, the navigation menu will slide in, from left to right:</p>

<span style={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>&#9776; open</span>

            <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 className = "list-group">

                      {/*your form component goes here */}

                      {this.props.children}

                  </div>

                </div>

            </div>

          </div>

        );

    }

}



ReactDOM.render(

  <Test/>,

  document.getElementById('test')

);


.overlay {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0, 0.9);

    overflow-x: hidden;

    transition: 0.5s;

}



.overlay-content {

    position: relative;

    top: 25%;

    width: 100%;

    text-align: center;

    margin-top: 30px;

}



.overlay a {

    padding: 8px;

    text-decoration: none;

    font-size: 36px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



.overlay a:hover, .overlay a:focus {

    color: #f1f1f1;

}



.overlay .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

}



@media screen and (max-height: 450px) {

  .overlay a {font-size: 20px}

  .overlay .closebtn {

    font-size: 40px;

    top: 15px;

    right: 35px;

  }

}



.overlay h2, .overlay p {

  color:white;

  }


<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 id="test"></div>