解决：使用子组件中的函数为 props 赋值？

如何解决解决：使用子组件中的函数为 props 赋值？

在我的父组件中，有一个状态存储来自子组件的选定任务 ID。我使用道具将数据从子组件传递到父组件。但我的问题是我将使用一个函数来在子组件中生成选定的任务 ID。我想要的结果是，如果用户选择一个按钮，它将触发将生成任务 id 的函数。然后它将数据存储到将传递给父组件的道具中。我将使用函数而不是使用 onClick={e => e.currentTarget.getAttribute('taskkd')} 的原因我还需要传递将显示对话框的其他道具。

父组件

const Home = () => {
  let userInfo = localStorage.getItem('userData');
  const [taskDeleteId,setTaskDeleteId] = useState();
  const [showPrompt,setShowPrompt] = useState(false);

  useEffect(() => {
    console.log(taskDeleteId);
  },[history,taskDeleteId]);

  return (
    <>
        <Grid item xs={12} sm={8} className={baseClasses.mainTaskContainer}>
          <TasksList
            deleteId={(deleteId) => setTaskDeleteId(deleteId)}
            showPrompt={(showPrompt) => setShowPrompt(showPrompt)}
          />
          <PromptComponent showPrompt={showPrompt} shownewArr={newArr} />
        </Grid>
      </Grid>
    </>
  );
};

子组件

const TasksList = ({ deleteId,showPrompt }) => {
  const selectedTask = (e) => {
    deleteId = e.currentTarget.getAttribute('taskid'); <--- the task id that i need to pass into my parent component
  };

  return (
    <>
      <Container
        component='div'
        maxWidth='xl'
        className={classes.taskContainer}
      ><Container
        component='div'
        maxWidth='xl'
        className={classes.taskContainer}
      >
        <Container
          component='div'
          maxWidth='xl'
          className={classes.todoContainer}
          onDragOver={(e) => onDragOverTask(e)}
          onDragLeave={(e) => onDragLeaveTask(e)}
          onDrop={(e) => onDropTask(e)}
        >
          <Typography variant='h6' className={classes.containerTitle}>
            <span>To do</span>
            <span>{taskTodo.length}</span>
          </Typography>
          {taskTodo.map((currentTask,index) => {
            return (
              <Card
                variant='outlined'
                className={classes.cardTask}
                key={index}
                style={{ background: '#f3f3f3',marginTop: '1rem' }}
                onDragStart={(e) => onDragStartTask(e,currentTask._id)} 
                draggable
              >
                {currentTask.desc && (
                  <Collapse
                    in={expanded === `todo-panel_${index}`}
                    timeout='auto'
                    unmountOnExit
                    className={classes.collapsePanel}
                    color='primary'
                  >
                    <CardContent className={classes.descPrevContainer}>
                      <Typography
                        variant='body1'
                        className={classes.text}
                        dangerouslySetInnerHTML={createMarkup(
                          textTruncate(currentTask.desc,50)
                        )}
                      ></Typography>
                    </CardContent>
                  </Collapse>
                )}
                <CardActions
                  disableSpacing
                  className={classes.bottomActionsContainer}
                >
                  <Tooltip title='Delete'>
                    <IconButton
                      aria-label='delete'
                      className={classes.BottomDelete}
                      taskid={currentTask._id}
                      onClick={(() => showPrompt(true),selectedTask)} <--- props
                    >
                      <DeleteIcon />
                    </IconButton>
                  </Tooltip>
                  <Tooltip title='Edit'>
                    <IconButton
                      aria-label='edit'
                      className={classes.BottomEdit}
                      taskid={currentTask._id}
                    >
                      <EditIcon />
                    </IconButton>
                  </Tooltip>
                </CardActions>
              </Card>
            );
          })}
        </Container>
    </>
  );
};