Reactjs 解决方案：使用子组件中的函数为道具赋值？

在我的父组件中，有一个状态存储子组件中选定的任务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>
    </>
  );
};

const Home=（）=>{
让userInfo=localStorage.getItem（'userData'）；
const[taskDeleteId，setTaskDeleteId]=useState（）；
const[showPrompt，setShowPrompt]=useState（false）；
useffect（（）=>{
console.log（taskDeleteId）；
}，[history，taskDeleteId]）；
返回(
setTaskDeleteId（deleteId）}
showPrompt={（showPrompt）=>setShowPrompt（showPrompt）}
/>
);
};

子组件

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

const TasksList=（{deleteId，showPrompt}）=>{
const selectedTask=（e）=>{
deleteId=e.currentTarget.getAttribute（'taskid'）；onDragLeaveTask（e）}
onDrop={（e）=>onDrop任务（e）}
>
做
{taskTodo.length}
{taskTodo.map（（当前任务，索引）=>{
返回(
onDragStartTask（e，currentTask.\u id）}
拖动
>
{currentTask.desc&&(
)}
显示提示（true），选择任务）}
);
})}
);
};

您能详细描述一下吗？无法理解您的实际问题。先生，我犯了一个简单的错误，但现在已经好了