单击渲染视图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> 
    ); 
}