reactjs - 如何在 React 组件实例上使用 onClick 监听器更新状态 Hook

Question

我正在尝试将 onClick 添加到更改 useState 钩子(Hook)状态的组件实例，并将其打印到控制台。但是，单击组件实例时不会触发任何内容。
我试过将它包装在一个 JSX div 元素中，并向 div 添加一个 onClick，该 div 可用于打印到控制台，但状态并未更新，因为总是显示未定义。
最终目标是在单击后将状态传递给另一个组件(链接页面)。
这是我的代码。
Card.js

export default function Card(props) {
  return (
    <div className="card" style={{ background: `${props.background}` }}>
      <h2>{props.taskName}</h2>
      <p>{props.description}</p>
    </div>
  );
}

Home.js

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 < 6) {
    timeOfDay = "Afternoon";
  } else {
    timeOfDay = "Evening";
  }

  const [task, setTask] = useState();

  useEffect(() => {
    console.log(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 to="/PlayerPage">
           <Card onClick={() => {console.log("hey") }}
            taskName="Short Task"
            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         />
          </Link>
     </div>
</>
);
}

PlayerPage.js - (需要显示更新状态的组件)

export default function PlayerPage() {
  return (
    <>
      <Header />
      <main className="player-page-main">
        <div className="player-page-main-wrap">
          <div className="timer-title-wrap">
            <Timer />
            <h2 className="task-title">{Updated state here}</h2>
          </div>
        </div>
      </main>
    </>
  );
}

Answer 1

Card组件需要附加通过的 onClick handler 属性到 DOM 元素。
例子:

export default function Card(props) {
  return (
    <div
      className="card"
      style={{ background: `${props.background}` }}
      onClick={props.onClick}
    >
      <h2>{props.taskName}</h2>
      <p>{props.description}</p>
    </div>
  );
}