Wie wird eine Aktion gesendet, die den Status einer Komponente von ihrer übergeordneten Komponente ändert?

Question

Ich versuche, einen modalen Dialog zu implementieren, der fragt, ob ich sicher bin, ob ich ein Element in der Anwendung löschen möchte oder nicht. Ich habe diese Komponenten:

const Options = item => (
    <OptionsMenu> 
     <MenuItem onClick={_ => { 
      console.log(`Deleting item ${JSON.stringify(item)}`) 
     }}> 
      <IconButton aria-label="Delete" color="accent"> 
       <DeleteIcon /> 
      </IconButton> 
      <Typography> 
       Eliminar 
      </Typography> 
     </MenuItem> 
     <DeleteDialog 
      item={item} 
     /> 
    </OptionsMenu> 
) 

Und meine Dialogkomponente:

const DeleteDialog = props => (
    <div> 
     <Button onClick={() => { 
     this.props.openDeleteDialog(this.props.item) 
     }}>Delete</Button> 
     <Dialog open={this.props.open} onRequestClose={this.props.cancelDeleteData}> 
     <DialogTitle>{"DELETE"}</DialogTitle> 
     <DialogContent> 
      <DialogContentText> 
      Are you sure you want to delete the item: {this.props.item.name} 
      </DialogContentText> 
     </DialogContent> 
     <DialogActions> 
      <Button onClick={this.props.cancelDeleteData} color="primary"> 
      Cancel 
      </Button> 
      <Button onClick={this.props.deleteData(this.props.item)} color="primary"> 
      Delete 
      </Button> 
     </DialogActions> 
     </Dialog> 
    </div> 
); 

const mapStateToProps = state => ({ 
open: state.item.delete.open, 
}) 

const mapDispatchToProps = dispatch => ({ 
...deleteDispatchesForScope(scopes.ITEM, dispatch) 
}) 

Was ich will, ist die openDeleteDialog Aktion zu versenden, die den offenen Zustand auf true setzt, aus der Options-Komponente in einem Ich werde mir erlauben, den modalen Dialog in anderen Komponenten wiederzuverwenden. Ich benutze react-redux und material-ui v1 dafür.

Answer 1

Um mehr wiederverwendbaren Komponenten zu haben, würde ich die DeleteDialog vom OptionsMenu, entkoppeln und auf einem ParentComponent verlassen, um die Requisiten für jedes Kind benötigt, um überliefern:

<ParentComponent> 
    <OptionsMenu> 
    <MenuItem onClick={this.props.openDeleteDialog}>Eliminar</MenuItem> 
    </OptionsMenu> 
    <DeleteDialog 
    open={this.props.isDeleteDialogOpen} 
    item={this.props.item} 
    onDelete={this.props.deleteData} 
    /> 
</ParentComponent>