クリック時のレンダービューReactjs

Question

オーバーレイ要素を作成しましたが、特定の入力フィールドがクリックされたときに表示します。私は反応が新しく、どのようにすればいいのか分かりません。

これは私、私は、入力フィールドをクリックしたときに

import React, { Component } from 'react'; 
import pro_pic from '../../Resources/img/Anon.jpg'; 
import menu_drop from '../../Resources/img/drop.png'; 

class QuestionOverlay extends Component { 


    render() { 

     return (

      <div id="overlay"> 

      </div> 



      ) 
    } 
} 

export default QuestionOverlay; 

を表示されますクリックイベントは、ここで

render() { 

     function popup_ques(e) { 
      e.preventDefault(); 

      alert("render overlay view"); 
     } 

     return (
      <div className="middle_div"> 

       <input className='post_data_input' placeholder="Ask your question here" ref="postTxt" 
         onClick={popup_ques}/> 



      </div> 


     ); 
    } 

あるので、私が作成したオーバーレイではなく、警告の表示されます図、与えている。

Answer 1

これは私がどうなるのかです：

constructor(props) { 
    super(props); 

    this.state = { 
    overlayVisible: false 
    } 
} 

render() { 
    function popup_ques(e) { 
     e.preventDefault(); 

     this.setState({ 
      overlayVisible: true 
     }); 
    } 

    return (
     <div className="middle_div"> 
      <input 
       className='post_data_input' 
       placeholder="Ask your question here" 
       ref="postTxt" 
       onClick={popup_ques}/> 

      {this.state.overlayVisible && <QuestionOverlay />} 
     </div> 
    ); 
} 

あなたの関数が純粋であることがあるので、あなたが何かを挿入したい場合は、UIレンダリング得る状態に基づいて、あなたはあなたの状態を変更するが、レンダリング機能は同じままです。

あなたはレンダリングのコンポーネントを維持するが、変更した方がよいかもしれない状態を維持したい場合はそのアプローチが効果的に、あなたはそれを表示するたびに新しいオーバーレイを構築しかし

：

import React, { Component } from 'react'; 

class QuestionOverlay extends Component { 
    render() { 
     if(!this.props.visible) { 
     return null 
     } 

     return (<div id="overlay"/>) 
    } 
} 

export default QuestionOverlay; 

とコンテナを：

constructor(props) { 
    super(props); 

    this.state = { 
    overlayVisible: false 
    } 
} 

render() { 
    function popup_ques(e) { 
     e.preventDefault(); 

     this.setState({ 
      overlayVisible: true 
     }); 
    } 

    return (
     <div className="middle_div"> 
      <input 
       className='post_data_input' 
       placeholder="Ask your question here" 
       ref="postTxt" 
       onClick={popup_ques}/> 

      <QuestionOverlay visible={this.state.overlayVisible}/> 
     </div> 
    ); 
}