單擊渲染視圖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; 

click事件是在這裏

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