フォームでオーバーレイを開く反応で反応するonFocus

Question

こんにちは私は特定の入力フィールドにフォーカスを置くと、フォームでオーバーレイを表示する方法を探しました。私は反応を使ってこれをしたい。これどうやってするの？

私のコード

import React, { Component } from 'react'; 


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; 

私が代わりに私は、フォームと透明オーバーレイを表示するアラートの...入力フィールドがクリックされたときに警告を表示する機能を書かれています。

私はこの

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay

おかげinadvanceのような何かをしたいです。

Answer 1

ここで私はサイドバーのclassNameを変更するコードを書いています。 toggleSideBarを呼び出すたびに、classNameがhideSideBarからshowSideBarに変更されます。逆も同様です。 hideSideBarとshowSideBarのCSSは、コードスクールのリンクのように記述する必要があります。それが動作することを願っています。

import React, { Component } from 'react'; 


class Middle extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     sidebar: 'hideSideBar', 
     posts: [], 
    } 
    } 

    toggleSideBar() { 
    if(this.state.toggleBar === 'showSideBar') { 
     this.setState({ toggleBar: 'hideSideBar' }); 
    } else { 
     this.setState({ toggleBar: 'showSideBar' });   
    } 
    } 

    render() { 
    return (
     <div className="middle_div"> 
     <input 
      className='post_data_input' 
      placeholder="Ask your question here" 
      ref="postTxt" 
      onClick={this.toggleSideBar.bind(this)} 
     /> 

     <div className={this.state.sidebar} /> 
      // This will be the sidebar 
     </div> 
     </div> 
    ); 
    } 
} 

export default Middle; 

Answer 2

私は、あなたが質問で与えたリンクに基づいて反応成分を作りました。 これは、あなたが望むものを達成するために多少役立つことを願っています。

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>