BrowserRouter 链接覆盖 onClick 事件

IT技术 reactjs react-hooks react-router-dom use-effect
2021-05-20 02:51:41

我正在尝试在单击事件后更新状态挂钩。但是，我的组件实例周围的 BrowserRouter 的链接覆盖了它的 onClick 函数。

但是当我删除“链接到”时，状态成功更新并在控制台中打印。

最终，我希望能够将更新后的状态传递给 PlayerPage 组件。但是我现在正在使用控制台来测试它的更新 - 它没有。

这是我的代码：

Home.js - 包含点击事件。

import { Link } from "react-router-dom";
import { useState, useEffect } from "react";

export default function Home() {
  
const [task, setTask] = useState();

  useEffect(() => {
    console.log(task);
  },[task])

  return (
    <>
     <Header />
      <main className="home-main">
       <div className="main-wrap">
        <section className="card-container">
         <h1>Good Morning</h1>
           <h1>Choose Your Work Style</h1>

            <div className="card-wrap">
              <Link to="/PlayerPage">
                  <Card onClick={() => {setTask('Short Task')}}
                    taskName="Short Task"
                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                  />
              </Link>
            </div>
   </>
 );
}

PlayerPage.js - 链接的目的地

import Header from "../components/Header";
import Timer from "../components/Timer";
import "./PlayerPage.scss";

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">{Task Name Will Go Here}</h2>
          </div>
        </div>
      </main>
    </>
  );
}
2个回答

好吧，这就是我所想的情况。

单击事件正在传播到Link组件，因此您可以调用event.stopPropagation()以防止单击事件冒泡，但现在链接不起作用。

如果您同时使用两者，则链接不会等待状态更新。

我认为最好的选择是不使用任何本地状态并在链接中以路由状态传递数据。使用toprops的对象版本来指定导航转换的pathname路径state。

export default function Home() {
  return (
    <>
      ...
      <Link
        to={{
          pathname: "/PlayerPage",
          state: {
            task: 'Short Task',
          },
        }}
      >
        <Card
          taskName="Short Task"
          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        />
      </Link>
      ...
    </>
  );
}

然后从location接收组件中的对象访问路由状态。

import { useLocation } from 'react-router-dom';

export default function PlayerPage() {
  const { state } = useLocation();
  return (
    <>
      <Header />
      ...
        <h2 className="task-title">{state.task}</h2>
      ...
    </>
  );
}

<Link to={{ pathname: "/PlayerPage", state: { task } }} />

在您的 PlayerPage 组件中，您的任务值可以从 location props访问。

this.props.location.state.data
其它你可能感兴趣的问题
上一篇使用 Ajax 在 React 中打开天气数据 下一篇如何使用 ForwardRefRenderFunction 导出 forwardRef