React日程网格点击定位任务：如何将TaskCard显示对应位置？

1. 给每个网格单元格绑定唯一定位标识 #

你的Month组件是按「日期列+小时行」划分的网格，每个单元格本质对应一个**「日期+小时」的时间槽**。渲染单元格时，给每个格子生成唯一标识（比如2024-05-20-14这种YYYY-MM-DD-HH格式），点击单元格时把这个标识以及对应的日期、小时数据传递给TaskFormPage。

举个代码示例：

// Month组件中单个单元格的渲染逻辑
const renderGridCell = (date, hour) => {
  const slotId = `${date}-${hour}`;
  const handleClick = () => {
    // 用路由跳转或模态框打开TaskForm，携带槽位信息
    navigate('/create-task', { state: { targetDate: date, targetHour: hour, slotId } });
  };

  return (
    <div 
      className="month-grid-cell" 
      onClick={handleClick}
      data-slot-id={slotId}
    >
      {/* 单元格原有内容 */}
    </div>
  );
};

2. 让任务与目标槽位绑定 #

在TaskFormPage中，接收传递过来的targetDate和targetHour，创建任务时把这两个字段作为任务的属性提交到Django API。

• 先在Django的Task模型里新增两个字段：task_date（DateField）和start_hour（IntegerField，范围0-23），用来存储任务对应的网格位置。
• 前端提交任务时带上这两个字段：

// TaskFormPage的提交逻辑
const handleSubmit = async (formData) => {
  const { targetDate, targetHour } = location.state;
  const taskPayload = {
    ...formData,
    task_date: targetDate,
    start_hour: targetHour,
    // 其他任务字段：标题、描述、时长等
  };

  await axios.post('/api/tasks/', taskPayload);
  // 提交后返回Month页面刷新任务列表
};

3. 在Month组件中精准匹配任务到单元格 #

把TaskLists获取到的完整任务列表传给Month组件后，渲染每个单元格时，过滤出当前单元格「日期+小时」匹配的任务，直接渲染在格子里：

// Month组件接收tasks属性，渲染单元格时匹配任务
const Month = ({ tasks }) => {
  // ...其他逻辑

  const renderGridCell = (date, hour) => {
    // 过滤出当前单元格对应的任务
    const matchedTasks = tasks.filter(task => 
      task.task_date === date && task.start_hour === hour
    );

    return (
      <div className="month-grid-cell">
        {/* 渲染匹配到的TaskCard */}
        {matchedTasks.map(task => (
          <TaskCard key={task.id} task={task} />
        ))}
      </div>
    );
  };

  // ...渲染网格
};

可选：跨小时任务的处理 #

如果你的任务支持跨多个小时（比如从14点到16点），可以在Task模型里再加一个end_hour字段。渲染时，计算任务覆盖的所有小时槽，在对应单元格都渲染TaskCard，或者用CSS绝对定位让TaskCard跨单元格显示（比如设置卡片的高度为n*单元格高度，定位到起始小时的格子）。

内容的提问来源于stack exchange，提问作者MrJonesBones