在 React App 中触发合成事件

IT技术 javascript jquery facebook events reactjs
2021-05-17 04:43:20

我正在为 Facebook 编写 Chrome 扩展程序,并希望以编程方式触发对帖子的重点评论草稿的提交。默认行为是在用户点击 Enter 键时提交,所以我试图欺骗 Facebook UI 认为用户这样做了。

Facebook 使用 React 和contenteditablediv 作为评论表单。

这是我尝试过的一组方法:

1) jQuery 事件触发 $('<the contenteditable div>').trigger($.Event('keydown', {which: 13}))

  • 我已经从内容脚本环境和实际页面环境中尝试了这个(通过响应的注入脚本postMessage和 Chrome 控制台)
  • 我还尝试document从每个上下文触发 , 上的事件
  • 似乎什么都没有发生。

2) 同样的事情,但使用 VanillaJS 事件触发。相关的 StackOverflow 问题

  • 也来自这两种环境
  • 没发生什么事

3)此时我意识到这是 React 并且它使用它自己的SyntheticEvents,所以我基本上复制/粘贴了这个Simulate函数,ReactTestUtils它应该通过模拟事件来帮助测试并在页面环境中运行它(required通过 Facebook 的前端获取对对象的引用require功能)。

  • 也不起作用。该函数完全执行且没有错误,但应用程序没有响应。

我已经在大多数keydown事件中尝试过这个,因为它有最多的听众。

我知道这些问题,但它们并没有帮助我理解:Force React to fire event through injection JavaScript

1个回答

根据您的描述尚不清楚这是否是一个问题,但SyntheticEvent由于该对象被重用,之前已经让我感到痛苦。React 文档中有关于此的注释

如果要以异步方式访问事件属性,则应调用event.persist()该事件,这将从池中删除合成事件并允许用户代码保留对该事件的引用。

如果您没有立即使用该事件,或者您试图将其传递到新的作用域中,则您需要使用persist()它。