在React应用程序中触发合成事件

11
我正在编写一个针对Facebook的Chrome扩展程序,并希望以编程方式触发帖子上聚焦评论草稿的提交。默认行为是在用户按下Enter键时提交,因此我试图欺骗Facebook UI,让其认为用户已经这样做了。
Facebook使用React和一个可编辑的div作为评论表单。
以下是我尝试过的一些方法:
1)jQuery事件触发器$('<the contenteditable div>').trigger($.Event('keydown', {which: 13})) - 我已经尝试过从内容脚本环境和实际页面环境(通过响应postMessage的注入脚本和Chrome控制台)进行尝试。 - 我还尝试从每个上下文中在document上触发事件。 - 没有任何反应。
2)相同的方法,但使用VanillaJS事件触发器。relevant StackOverflow question - 也是从两种环境中尝试的。 - 没有任何反应。

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

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

我主要尝试了这种方法,因为它具有最多的附加侦听器:keydown事件。

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


你是否想通过键盘事件来更改可编辑div的内容?你能分享一个JSFiddle展示你的问题吗? - Espen
嗨,马特!你找到一种触发事件的方式,让React监听了吗? - Sergio
抱歉,我没有。最终我放弃了这个方向,选择了一个稍微不同的解决方案(需要用户按下ctrl/cmd-enter键,Facebook会将其解释为“enter”,但我的扩展程序可以有自己的处理程序;请参见https://github.com/Shrugs/EMP/blob/master/app/scripts/contentscript.js获取更多信息)。 - Matt Condon
1个回答

2

截至v17版本,e.persist()不再起作用,因为SyntheticEvent不再被池化。 - Andreas Herd

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接