ReactJS 모달 윈도우

Question

내 앱을 만드는 방법을 모릅니다. onClick은 구성 요소 ModalWindow을 렌더링해야하는 구성 요소 ContactAdd이 있습니다. ModalWindow의 매개 변수는 isOpened={this.state.open}입니다. 부모 구성 요소에서이 상태를 제어하는 ​​방법?

import React from 'react'; 

import ContactAddModal from './ContactAddModal.jsx'; 

import './ContactAdd.css'; 

export default class ContactAdd extends React.Component { 
    constructor(props){ 
     super(props); 
    } 
    render() { 
     return (
      <div className="add-contact" onClick={ ??????? }> 
       <img src="./img/add.png" /> 
       <ContactAddModal/> 
      </div> 
     ) 
    } 
} 




import React from 'react'; 

export default class ContactAddModal extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      show: false, 
     }; 
     this.handleCloseModal = this.handleCloseModal.bind(this); 
    } 

    handleCloseModal() { 
     this.setState({ show: false }); 
    } 

    render() { 
     return (
      <div className="modal" isOpened={this.state.show}> 
       <button onClick={this.handleCloseModal}>Close Modal</button> 
      </div> 
     ) 
    } 

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