Reagieren: Schließen von Modal in Unterkomponente von Parent

Question

Ich habe ein Modal in einer untergeordneten Komponente, die eine Löschfunktion in der übergeordneten Komponente behandelt. Das Kind hält den Zustand des Modalen (offen oder geschlossen), da dies der logischste Ort dafür zu sein scheint.

Eltern

removeItem() { 
    console.log('clicked'); 
    }; 

... 

<DeleteButton deleterecord={()=>this.removeItem(data.row._original._id)}/> 

Kinder

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

open() { 
    this.setState({ showModal: true }) 
}; 


render() { 

return(
    <div> 
    <Button 
    bsStyle="primary" 
    bsSize="small" 
    onClick={this.open.bind(this)} 
    > 
    Delete 
    </Button> 

    <Modal 
    show={this.state.showModal} 
    onHide={this.close.bind(this)} 
    bsSize="small" 
    > 
    ... 

Wie soll ich in der Nähe des modalen vom Eltern nach dem removeItem Code ausgeführt wurde.

Answer 1

Sie könnten eine Referenz verwenden, um die Funktion zum Schließen von Kindern aufzurufen?

Eltern

removeItem() { 
     console.log('clicked'); 
     this.child.close(); 
    } 

    render() { 
     return (
     <div> 
      <ChildWithModal ref={(ref) => { this.child = ref; }} /> 
     </div> 
    ); 
    } 

Kinder

... 

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