使用外部js触发Next.js组件中的点击事件

Question

我的任务是在使用 Next.js 构建的 UI 中进行一些手动更新。 UI 中有一个元素重复了大约 100 万次（不是真的，但你明白了），我需要单击该元素来切换状态。

元素的选择器很简单。我在控制台中写了

const el = document.querySelector('some-selector')

并能够注销正确的元素。唯一的问题是，当我执行

el.click()

时，元素状态没有切换。我也尝试过

el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: false }));

但没有运气。

例如，我相信 Nike 的网站使用 Next.js。如果您转到 主页 并打开控制台，您可以选择带有以下内容的旋风图标：

const swoosh = document.querySelector('.swoosh')

。我需要的是模拟从控制台单击该元素。

我认为这里的问题是，在底层，next.js 组件有一个自定义的单击处理程序，无论出于何种原因，除非我物理单击该元素，否则它不会被触发。有人知道如何用代码调用实际的 next.js 点击处理程序吗？

Answer 1

这可能与 next.js 无关，这似乎更像是一个 React 问题。您自己的项目面临的情况和您提供的耐克网站上的情况也可能不同。但要触发 Nike 网站上的那个，我们至少可以这样做：

const swooshAnchor = document.querySelector('.swoosh a');
function getReactProps(el) {
  const keys = Object.keys(el);
  const propKey = keys.find(key => key.includes('reactProps'));
  return el[propKey];
}

getReactProps(swooshAnchor).onClick(new Event('click'));

您首先需要确定哪个元素准确附加了

onClick

侦听器（在本例中，它是

<a>

元素，它是

.swoosh

的子元素，在您的情况下，它可能是其他元素）。那么上面的代码所做的基本上就是从元素中获取 React props，并获取其中的

onClick

函数。