Render view on click 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> 


     ); 
    } 

Так что, когда я нажимаю на поле ввода, наложение Я создал должен появиться вместо предупреждения I дали.

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> 
    ); 
} 

Ваша функция должна быть чистой, поэтому, основываясь на состоянии вы получите пользовательский интерфейс визуализации, если вы хотите, чтобы вставить что-то, вы измените свое состояние, но ваша функция рендеринга остается неизменной.

Однако этот подход эффективно строит новую накладку каждый раз, когда вы показать его, если вы хотите сохранить состояние, возможно, лучше держать компонент, но изменить это делает:

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> 
    ); 
}