在React App中触发合成事件

Question

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

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

以下是我尝试过的一系列事情：

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

• 我已经在内容脚本环境和实际页面环境中尝试了这一点（通过响应postMessage和Chrome控制台的注入脚本）
• 我也尝试从每个上下文触发document上的事件。
• 似乎没有发生任何事情。

2）同样的事情，但VanillaJS事件触发。 relevant StackOverflow question

• 也来自两个环境
• 什么都没发生

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

• 也行不通。该函数完全执行且没有错误，但是应用程序没有响应。

我在大多数keydown事件中尝试过此操作，因为它附加了大多数侦听器。

我知道这些问题，但它们没有帮助我理解：Force React to fire event through injected JavaScript

Answer 1

根据您的描述不清楚这是否是一个问题，但由于对象被重复使用，SyntheticEvent之前让我感到痛苦。 React docs中有关于此的说明：

  

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

如果您没有立即使用该活动，或者您尝试将其传递到新范围，则需要persist()。