反応が入力されたときにオーバーレイを表示

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

入力：同じrender()関数内のどこかにarroundの

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

は、オーバーレイdivの追加：もちろん

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

を必要に応じて、あなたのUIで必要なもの、適切なオーバーレイ効果を持つようにDIVするスタイリングを追加

オーバーレイをオフにするには、たとえば、次のようなアクションで別のイベントリスナーを追加する必要があります。クリック

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