从OnClick在React对话框上传递参数

Question

我对React.js相当陌生，我目前正在尝试通过onclicks在对话框中传递参数。

       <IconButton className={classes.approvebutton} onClick={() => handleDialogClick("approve",1)}> 
          <ThumbUp />
       </IconButton>
       <IconButton className={classes.rejectbutton} onClick={() => handleDialogClick("reject",1)} >
          <ThumbDown />
       </IconButton>   

关于onclick函数：

  function handleDialogClick (approvalType,id){
alert(`hello, ${approvalType}`);
switch(approvalType) {
  case 1:
    setDialogOpen(true);

    break;
  case 2:
    setDialogOpen(true);
    break;
  default:
    setDialogOpen(true);
}}

我想在对话框中传递批准类型和ID：

<Dialog onClose={handleDialogApproveClose} aria-labelledby="simple-dialog-title" open={dialogOpen}>
          <DialogTitle id="simple-dialog-title">Request Approval</DialogTitle>
          <DialogContent>
            <DialogContentText id="alert-dialog-description">
              Do you want to //approvalType goes here//  this request?
            </DialogContentText>          
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose} color="primary">
              No
            </Button>
            <Button onClick={() => submitAction(// id goes here)} color="primary" autoFocus>
              Yes
            </Button>
          </DialogActions>
        </Dialog> 

所有代码都在一个组件下。

我曾尝试研究Google，但对如何在我的代码中实现它感到困惑。

Answer 1

我认为您的handleDialogClick工作不正确。在开关情况下，您使用approvalType检查条件，但在每种情况下，您都在使用id打开或关闭对话框setDialogOpen。如果要使用approvalType设置DialogOpen，则代码应为：

function handleDialogClick (approvalType,id){
  alert(`hello, ${approvalType}`);
  switch(approvalType) {
    case 'approve':
      setDialogOpen(true);
      break;
    case 'reject':
      setDialogOpen(true);
      break;
    default:
      setDialogOpen(true);
}}

如果要使用id设置setDialogOpen，则代码应为：

function handleDialogClick (approvalType,id){
  alert(`hello, ${approvalType}`);
  switch(id) {
    case 1:
      setDialogOpen(true);
      break;
    case 2:
      setDialogOpen(true);
      break;
    default:
      setDialogOpen(true);
}}