时间戳

首页 > 解决方案 > 如何使用 React 组件实例上的 onClick 侦听器更新 State Hook

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

问题描述

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

我已经尝试将它包装在 JSX 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>
  );
}

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

标签： reactjsuse-effectreact-propsuse-state

解决方案

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

推荐阅读