javascript - 在 react 元素上模拟点击事件

Question

我正在尝试模拟 .click() event在 React 上元素，但我不知道为什么它不起作用(当我发射 event 时它没有反应)。

我想仅使用 JavaScript 发布 Facebook 评论，但我卡在了第一步(在 .click() 元素上执行 div[class="UFIInputContainer"])。

我的代码是:

document.querySelector('div[class="UFIInputContainer"]').click();

这是我尝试执行此操作的 URL:https://www.facebook.com/plugins/feedback.php...

附言我对 React 没有经验，我真的不知道这在技术上是否可行。可能吗？

编辑:我正在尝试从 Chrome DevTools Console 执行此操作.

Answer 1

React 跟踪 mousedown 和 mouseup 事件来检测鼠标点击，而不是像大多数其他事件一样跟踪 click 事件。因此，不是直接调用 click 方法或调度 click 事件，而是必须调度 down 和 up 事件。为了更好的衡量，我还发送了 click 事件，但我认为这对于 React 来说是不必要的:

const mouseClickEvents = ['mousedown', 'click', 'mouseup'];
function simulateMouseClick(element){
  mouseClickEvents.forEach(mouseEventType =>
    element.dispatchEvent(
      new MouseEvent(mouseEventType, {
          view: window,
          bubbles: true,
          cancelable: true,
          buttons: 1
      })
    )
  );
}

var element = document.querySelector('div[class="UFIInputContainer"]');
simulateMouseClick(element);

这个答案的灵感来自 Selenium Webdriver code .