React组件实例onClick不触发，如何更新State Hook并传值到路由页

核心问题原因 #

1. 自定义组件不会自动透传事件属性：你给Card组件绑定的onClick只是普通props，Card内部没有将该属性挂载到DOM节点上，因此点击不会触发回调。
2. 路由传参逻辑缺失：你仅配置了Link的跳转路径，没有将需要传递的状态挂载到路由参数中，PlayerPage无法拿到对应数据。
3. 额外小bug：时间判断逻辑错误，getHours返回24小时制数值，time >= 12 && time < 6永远为假，下午的判断条件需要调整为time < 18。

修复后的代码 #

Card.js

export default function Card(props) {
  return (
    // 透传onClick属性到根DOM节点
    <div className="card" style={{ background: `${props.background}` }} onClick={props.onClick}>
      <h2>{props.taskName}</h2>
      <p>{props.description}</p>
    </div>
  );
}

Home.js

这里提供两种实现方案，按需选择即可：

方案1：直接用Link传参（无额外点击逻辑时最简写法）

import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import Card from "../components/Card";
import "../pages/Home.scss";
import ProfileButton from "../components/ProfileButton";
import Header from "../components/Header";
import "./PlayerPage";

export default function Home() {
  const date = new Date();
  const time = date.getHours();
  let timeOfDay;

  if (time < 12) {
    timeOfDay = "Morning";
  // 修复时间判断逻辑
  } else if (time >= 12 && time < 18) {
    timeOfDay = "Afternoon";
  } else {
    timeOfDay = "Evening";
  }

  // 定义要传递的任务数据
  const taskData = {
    taskName: "Short Task",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  }

 return (
  <>
   <Header />
    <main className="home-main">
     <div className="main-wrap">
      <section className="card-container">
       <h1>Good {timeOfDay}</h1>
        <h1>Choose Your Work Style</h1>
         <div className="card-wrap">
          {/* 把要传递的数据放在Link的state属性里 */}
          <Link to="/PlayerPage" state={taskData}>
           <Card 
            taskName={taskData.taskName}
            description={taskData.description}
         />
          </Link>
     </div>
     </section>
     </div>
     </main>
</>
);
}

方案2：编程式导航（需要先执行打印、更新本地状态等逻辑时使用）

import { useNavigate } from "react-router-dom";
// 其他导入保持不变

export default function Home() {
  const navigate = useNavigate()
  // 时间判断、taskData定义保持不变

  const handleCardClick = (task) => {
    console.log("hey")
    // 可在此处添加更新本地state的逻辑
    // setTask(task)
    // 手动跳转并传参
    navigate("/PlayerPage", {state: task})
  }

 return (
  <>
   <Header />
    <main className="home-main">
     <div className="main-wrap">
      <section className="card-container">
       <h1>Good {timeOfDay}</h1>
        <h1>Choose Your Work Style</h1>
         <div className="card-wrap">
          {/* 不需要Link包裹，直接绑定点击事件 */}
           <Card 
            onClick={() => handleCardClick(taskData)}
            taskName={taskData.taskName}
            description={taskData.description}
         />
     </div>
     </section>
     </div>
     </main>
</>
);
}

PlayerPage.js

import { useLocation } from "react-router-dom"
import Header from "../components/Header"
import Timer from "../components/Timer" // 注意导入你用到的Timer组件

export default function PlayerPage() {
  // 获取路由传递的参数
  const { state } = useLocation()
  return (
    <>
      <Header />
      <main className="player-page-main">
        <div className="player-page-main-wrap">
          <div className="timer-title-wrap">
            <Timer />
            {/* 可选链?.避免直接访问页面无参数时报错 */}
            <h2 className="task-title">{state?.taskName}</h2>
          </div>
        </div>
      </main>
    </>
  );
}

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