Material UI 在用户可以按是按钮删除记录之前，带有复选框确认的对话框

Question

我正在尝试实现一个 mui 对话框，其中包含用户必须先 check/acknowledge 才能 select“是”选项的复选框。

我目前有一个正在调用的工作对话框组件，它没有复选框，但我添加了如下复选框部分：

export default function ConfirmCheckboxDialog(props) {
  const { confirmDialog, setConfirmDialog } = props;
  const classes = useStyles();

  const [checked, setChecked] = React.useState(false);  

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };  

  return (
    <Dialog open={confirmDialog.isOpen} classes={{ paper: classes.dialog }}>
      <DialogTitle className={classes.dialogTitle}>
        <IconButton disableRipple className={classes.titleIcon} size="large">
          <NotListedLocationIcon />
        </IconButton>
      </DialogTitle>
      <DialogContent className={classes.dialogContent}>
        <DialogContentText id="alert-dialog-description">
          <Typography variant="h6">{confirmDialog.title}</Typography>
          <FormControlLabel
          control={
            <Checkbox checked={checked} onChange={handleChange} />
          }
          label="Please acknowledge"
        />
        </DialogContentText>
      </DialogContent>
      <DialogActions className={classes.dialogAction}>
        <Controls.Button
          text="No"
          color="primary"
          onClick={() => setConfirmDialog({ ...confirmDialog, isOpen: false })}
        />
        <Controls.Button text="Yes" color="success" onClick={confirmDialog.onConfirm} />
      </DialogActions>
    </Dialog>
  );
}

现在我从另一个组件调用上面的 ConfirmCheckboxDialog 组件，我在其中设置了以下详细信息：

const [confirmDialog, setConfirmDialog] = useState({ isOpen: false, title: '' });

我还有以下按钮：

<Button
  color="secondary"
  onClick={() => {
    setConfirmDialog({
     isOpen: true,
     title: `Delete?`,
     onConfirm: () => {
       console.log("Deleted......";
     }
   });
>
  {<span>Delete</span>}
</Button>

<ConfirmCheckboxDialog confirmDialog={confirmDialog} setConfirmDialog={setConfirmDialog} />

基于上述 ConfirmCheckboxDialog 组件，我不确定如何针对 Yes 按钮验证复选框，因为设置 onClick={confirmDialog.onConfirm} /> 的唯一方法是复选框是 set/true

任何帮助都会很好。

Answer 1

尝试定义一个专用函数来处理 Yes 按钮点击：

const handleYes = () => {
    if (checked && confirmDialog.onConfirm) {
        setConfirmDialog({ ...confirmDialog, isOpen: false })
        confirmDialog.onConfirm();
    }
}

...

<Controls.Button text="Yes" color="success" onClick={() => handleYes()} />

Material UI 在用户可以按是按钮删除记录之前，带有复选框确认的对话框

Material UI Dialog with checkbox acknowledgement before user can press the yes button to delete record

checkbox

dialog

reactjs

material-ui