验证对话框组件以正确删除父组件中的项

import React, { useState } from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material';

const DeleteConfirmationDialog = ({ open, onClose, onDelete }) => {
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>Delete Confirmation</DialogTitle>
      <DialogContent>
        <Typography>Are you sure you want to delete this item?</Typography>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button onClick={onDelete} color="secondary">Delete</Button>
      </DialogActions>
    </Dialog>
  );
};

const ParentComponent = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  const [openDialog, setOpenDialog] = useState(false);
  const [itemToDelete, setItemToDelete] = useState('');

  const handleDeleteClick = (item) => {
    setItemToDelete(item);
    setOpenDialog(true);
  };

  const handleDeleteConfirm = () => {
    setItems(items.filter(item => item !== itemToDelete));
    setOpenDialog(false);
  };

  const handleCloseDialog = () => {
    setOpenDialog(false);
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <Button onClick={() => handleDeleteClick(item)}>Delete</Button>
          </li>
        ))}
      </ul>
      <DeleteConfirmationDialog
        open={openDialog}
        onClose={handleCloseDialog}
        onDelete={handleDeleteConfirm}
      />
    </div>
  );
};

export default ParentComponent;