在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事件触发。 相关的StackOverflow问题

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

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

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

我已经尝试了大多数keydown事件，因为它拥有最多的监听器。

我知道这些问题，但它们没有帮助我理解： 强制React通过注入JavaScript来触发事件

Answer 1

根据你的描述不清楚这是否是一个问题，但SyntheticEvent之前由于对象被重用这一事实而让我感到痛苦。 React文档中有一条关于此的说明：

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

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