ReactJSモーダルウィンドウ

Question

私のアプリの作り方はわかりません。 onClickのコンポーネントModalWindowをレンダリングする必要があるコンポーネントContactAddがあります。 ModalWindowのパラメータはisOpened={this.state.open}です。親コンポーネントからこの状態を制御する方法は？

​​

Answer 1

モーダルステートレスコンポーネントをここではより簡単にすることができます。私は受け入れられると思うすべてのモーダルの終了を処理しなければならないというトレードオフです。この答えは単なる選択肢であり絶対的な真実ではありません。

それは今で

export default class ContactAdd extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      showModal: true 
     }; 
     this.hideModal = this.hideModal.bind(this); 
    } 

    hideModal() { 
     this.setState({ 
      showModal: false 
     }); 
    } 

    render() { 
     return (
      <div className="add-contact"> 
       <img src="./img/add.png" /> 
       <ContactAddModal handleClose={this.hideModal} isOpened={this.state.showModal} /> 
      </div> 
     ) 
    } 
} 

のようなものモーダルになります：

export default class ContactAddModal extends React.Component { 
    render() { 
     return (
      <div className="modal" isOpened={this.props.isOpened}> 
       <button onClick={this.props.handleClose}>Close Modal</button> 
      </div> 
     ) 
    }