display a overlay when input is clicked in react

Question

I'm trying to display a overlay when a certain Input field is clicked. I'm doing this in react. How can I do this?

This is my code

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;

What is the approach I should take?

Answer 1

I have created a sample react component. I hope this will help you in somewhat way to achieve what you want.

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>

Answer 2

Input:

<input onFocus={() => this.setState({show_overlay: true})} />

somewhere arround in same render() function add overlay div:

<div 
  style={{display: this.state.show_overlay === true ? 'block' : 'none'}}
>
  overlay
</div>

of course add styling to div as needed to have proper overlay effect, what's needed by your UI

To turn overlay off, you will need to add another event listener on some action, like e.g. click

<button onClick={() => this.setState({show_overlay: false})}>
  Close overlay
</button>