コンポーネントを削除して反応します

Question

inputがクリックされたときにoverlayページが表示されています。今度はoverlayページのユーザーclicksのどこかにあるoverlayのページを削除したいと考えています。どうやってやるの？

私は私のoverlayがコンポーネントにQuestionOverlay

class QuestionOverlay extends Component { 
    constructor() { 
     super(); 
    } 

    closeOverLay = (e) => { 
     alert("fse"); 
    } 

    render() { 
     return (
      //Here I have implemented my overlay 
     ) 
    } 

} 

export default QuestionOverlay; 

で、どのように私は私がどこかをクリックするとオーバーレイコンポーネントを削除/閉じることができ、この

constructor(props) { 
     super(props); 

     this.state = { 
      showComponent: false, 
     }; 
     this.popup_ques = this.popup_ques.bind(this); 

    } 

    popup_ques() { 
     this.setState({ 
      showComponent: true, 
     }); 
    } 

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

       {this.state.showComponent ? <QuestionOverlay/> : null} 

      </div> 
     ); 
    } 

などのクリックでオーバーレイを表示しています私のオーバーレイ？

Answer 1

オーバレイのonClickと呼ばれるオーバーレイの親コンポーネント（オーバーレイを表示するコンポーネント）から関数を渡します。この機能は、オーバレイを隠すために親のthis.state.showComponentをfalseに更新します。

親

constructor(props) { 
    super(props); 

    this.state = { 
     showComponent: false, 
    }; 
    this.popup_ques = this.popup_ques.bind(this); 
    this.hide_overlay = this.hide_overlay.bind(this); 

} 

popup_ques() { 
    this.setState({ 
     showComponent: true, 
    }); 
} 

hide_overlay() { 
    this.setState({ 
    showComponent: false 
    }) 
} 

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

      {this.state.showComponent && <QuestionOverlay hideOverlay={this.hide_overlay} />} 

     </div> 
    ); 
} 

オーバーレイ

class QuestionOverlay extends Component { 
    constructor() { 
    super(); 
    } 

    closeOverLay = (e) => { 
    alert("fse"); 
    } 

    render() { 
    return (
     <div onClick={this.props.hideOverlay}> 
      // Overlay content 
     </div> 
    ) 
    } 

} 

export default QuestionOverlay;