javascript - 如何在 Next.js 中使用 stopPropagation()？

Question

我正在尝试使用 stopPropagation，因此在单击任何其他元素后，我的下拉菜单将关闭。
当我尝试使用 stopPropagation 和更新 bool 状态时，按钮会重新渲染页面(将状态重置为“false”)，而不是将状态更新为 true，无论如何它都会停留在“true”上。
我写了一个例子的代码:

import { useEffect, useState } from "react";

export default function IndexPage() {
  const [state, setState] = useState(false);

  useEffect(() => {
    document.body.addEventListener("click", () => {
      setState(false);
    });
  });

  const onButtonClick = (e) => {
    e.stopPropagation();
    setState(!state);
  };

  console.log(state);

  return (
    <div>
      <button onClick={onButtonClick}>Click</button>

      <h1>{state ? "true" : "false"}</h1>
    </div>
  );
}

这个问题好像出现了 仅限 使用 Next.js
我用 React 应用程序编写了相同的代码，没有问题。
Next.js 代码框 link
React 代码框 link
编辑:
当你 fork Next.js 沙箱项目时，一切正常。 (但它并没有解决我原始代码的问题)。
任何人都知道为什么会这样？

Answer 1

这是一个奇怪的问题。在代码框容器中，状态被保留以进行超时编辑，并且不会导致任何重新渲染，因此可能是您的 e.stopPropagation添加到事件处理程序时没有触发重新渲染，因此按钮的旧处理程序仍然附加，这意味着当您单击按钮时主体上的事件监听器将继续触发，因为我们的处理程序从未更新为因子在 e.stopPropagation .
当我 fork 你的 Next.js 设置时，一切正常。因为它现在不是增量变化。该容器为我重建，不保留任何过去的状态，因此没有陈旧的事件处理程序或任何东西。
测试两种设置之间差异的最佳方法是查看控制台是否在您删除 e.stopPropagation 时记录任何值。两者的线。你会看到 Next.js 没有，但 React 有。这意味着即使保留的 React 的状态仍然触发了渲染，等等新的渲染，被创建的事件处理程序知道:-

Hey, I don't have e.stopPropagation anymore so myevent will bubble up

更新 - 对于 Next.js 容器，似乎每次更改后都需要点击 Save 才能重新渲染。不要像 React 容器那样单独依赖编辑。