Display A Overlay When Input Is Clicked In React

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

Solution 1:

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

classTestextendsReact.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><spanstyle={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>&#9776; open</span><divref       = "snav"className = "overlay"style     = {this.state.style}
            ><divclassName = "sidenav-container"><divclassName = "text-center"><h2>Form</h2><p>This is a sample input form</p></div><ahref      = "javascript:void(0)"className = "closebtn"onClick   = {this.closeNav}
                    >
                        ×
                    </a><divclassName = "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;
}

.overlaya {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlaya:hover, .overlaya:focus {
    color: #f1f1f1;
}

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

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

.overlayh2, .overlayp {
  color:white;
  }

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="test"></div>

Solution 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>