Question

我正在尝试实现一个模态对话框，询问我是否确定是否要删除应用程序中的项目。我有这个组件：

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

我的对话框组件是：

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

我想要的是从Options组件调度openDeleteDialog操作，将open状态设置为true，这样我将允许我在其他组件中重用模态Dialog。我正在使用react-redux和material-ui v1。

Answer 1

为了拥有更多可重复使用的组件，我会将DeleteDialog与OptionsMenu分离，并依靠ParentComponent传递每个孩子所需的道具：

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

如何从其父组件调度更改组件状态的操作？

1 个答案: