當輸入被點擊時顯示一個疊加

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

我已經創建了一個示例反應組件。 我希望這會幫助你以某種方式實現你想要的。

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 onFocus={() => this.setState({show_overlay: true})} /> 

在同一render()功能添加疊加DIV以防萬一某處：

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

當然添加樣式到的div需要有適當的疊加效果，真實的你的UI

需要什麼

要重疊覆蓋，您需要在某個操作上添加另一個事件偵聽器，例如點擊

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