Réagir: Comment fermer un modal d'un enfant ouvert depuis un composant parent

Vous devez passer un rappel comme accessoire dans Composant enfant , il mettra à jour le Composant parent lorsque vous cliquez sur closeButton dans l'enfant .

// Parent Component
callbackModal = () => {
   this.setState({ showModal: false });
}
//ChildButton
closeButtonClickHandler = () => {
  this.props.callbackModal();
}

Une variable d'état locale ne peut être contrôlée qu'à l'intérieur du composant dans lequel elle a été déclarée.

Vous ne pourrez pas fermer le modal depuis l'intérieur du composant enfant sans passer une méthode du composant parent qui change l'état qui est transmis.

Donc, pour fermer votre modal, vous devrez créer une méthode this.closeModal et la passer du Parent à l'enfant ...

// Parent
closeModal = () => {
  this.setState({showModal: false});
}
// ...
<ChildModal show={this.state.showModal} handleClose={this.closeModal} />
// ... 

Oui, vous pouvez le fermer à partir du composant enfant, mais vous aurez besoin d'au moins un peu d'interférence du composant parent, et c'est parce que vous avez défini l'état de basculement de ce modèle dans le composant parent.

simplement définir une méthode qui fermera le modal dans le composant parent, le transmettra au composant enfant en tant que prop, et l'appellera là.

this.props.handleModalClose()

le transmet maintenant à votre enfant composant et appelez-le simplement là lors d'un événement comme

//in your parent component 
handleModalClose = ()=>{
this.setState({showModal: false})}

class Parent extends Component {

constructor(props) {
  super(props);
  this.showModal = this.showModal.bind(this);
  this.closeModal = this.closeModal.bind(this)
  this.state = {
    showModal: false
  };
}
showModal() {
  this.setState({ showModal: true });
}
closeModal() {
  this.setState({ showModal: false });
}
renderRow() {
  return (
    <tr>
      <td onClick={() => this.setState({ show: true })}>test</td>
      <ChildModal show={this.state.showModal} close={this.state.closeModal}/>
    </tr>
  );
}
}

class ChildModal extends Component {
  render() {
    return (
       <Modal show={this.props.showModal}>
            <Modal.Header closeButton> 
            <Modal.Title>Test</Modal.Title> 
            </Modal.Header>
            <Modal.Body> 
                <buttom onClick={this.props.closeModal()}> ......
            </Modal.Body>
        </Modal>
    );
  }
}

Lorsque vous définissez un état dans un composant parent, à peu près tout autour de cet état est géré à partir de là. Le composant enfant ne peut recevoir des données du composant parent que sous la forme d'accessoires.

Le composant parent contrôle l'état d'ouverture et de fermeture du modal donc pour que vous puissiez fermer le modal du composant enfant, vous devez définir une fonction closeModal sur le composant parent qui définira la variable showModal (définie dans l'état de votre composant parent) de true à false.

closeModal = () => {
      this.setState({ showModal: false });
    }

Passez ensuite cette fonction comme accessoire au composant enfant et appelez la fonction à partir de là. Lorsque vous cliquez sur le bouton de fermeture du modal, l'état sera mis à jour sur le composant parent.