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

我创建了一个样本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">{}{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>