如何使用 React 组件实例上的 onClick 侦听器更新 State Hook答案

【问题标题】：How to update State Hook with onClick listener on React Component Instance如何使用 React 组件实例上的 onClick 侦听器更新 State Hook
【发布时间】：2021-11-12 20:32:08
【问题描述】：

我正在尝试将 onClick 添加到更改 useState 挂钩状态的组件实例，并将其打印到控制台。但是，单击组件实例时不会触发任何内容。

我尝试将它包装在一个 JSX div 元素中，并在 div 中添加一个 onClick，它可以打印到控制台，但状态没有更新，因为总是显示未定义。

最终目标是在点击后将状态传递给另一个组件（链接页面）。

这是我的代码。

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

【问题讨论】：

Card 组件中的什么你想要响应被点击？
根据选择的答案，卡片组件现在可以点击了。但是，状态仍然没有更新
不清楚您如何验证状态更新。您能否更新您的问题以包含完整的 Home 组件，以便我们可以看到状态以及 Card 是如何呈现的？我在这个正在运行的codesandbox 中看到了状态更新。哦，我明白了，您想将task 状态传递给PlayerPage 组件？您使用的是什么路由/导航库？我认为这个新问题已经足够偏离主题了，它需要一个新的 stackoverflow 帖子。
我正在使用 BrowserRouter，我同意。会发新帖。感谢大家的帮助
请随时在此处 ping (@) 我并提供新帖子的链接，或在新帖子的评论中 ping (@) 我，我会更深入地了解。跨度>

标签： reactjs use-effect react-props use-state

【解决方案1】：

Card 组件需要将传递的onClick 处理程序属性附加到 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>
  );
}

【讨论】：

啊啊啊我明白为什么这现在有意义了。非常感谢。
它使卡片组件可点击。但是状态仍然没有更新。有什么想法吗？