触发反应中的合成事件 [英] Triggering Synthetic Event in React App

问题描述

我正在为Facebook撰写Chrome扩展程序，并希望以编程方式触发在一篇文章中提交重点评论草稿。默认行为是在用户点击Enter键时提交，所以我试图欺骗Facebook用户界面，认为用户这样做。

I'm writing a Chrome extension for Facebook and want to programmatically trigger the submission of the focused comment draft on a post. The default behavior is to submit when the user hits the Enter key, so I'm attempting to trick the Facebook UI into thinking that the user did so.

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

Facebook uses React and a contenteditable div for comment forms.

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

Here's a set of things that I've tried:

1）jQuery事件触发 $（'< contenteditable div>'）。trigger（$。Event（'keydown'，{which：13} ））

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

• 我已经从内容脚本环境和实际的页面环境（通过这两个注册脚本都响应 postMessage 和Chrome控制台）


• 我也尝试触发文件，从每个上下文。


• 似乎没有发生。

• I've tried this from both the content-script environment and the actual page environment (via both an injected script that responds to postMessage and the Chrome console)
• I've also tried triggering the event on the document, from each context.
• Nothing seems to happen.

2）同样的事情，但是与VanillaJS事件触发。 相关的StackOverflow问题

2) Same thing, but with VanillaJS event triggering. relevant StackOverflow question

• 也来自这两种环境


• 没有任何变化

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

3) At this point I realized that this is React and it uses it's own SyntheticEvents, so I basically copy/pasted the Simulate function from ReactTestUtils that's supposed to help testing by simulating events and ran that within the page's environment (grabbing references to the required objects via Facebook's frontend require function).

• 也不行。该功能完全执行并且没有错误，但是没有应用程序的响应。

我已经尝试过，主要是 keydown 事件，因为它具有最多的监听器。

I've tried this with mostly keydown events, because that has the most listeners attached to it.

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

I'm aware of these questions, but they haven't helped my understanding: Force React to fire event through injected JavaScript

推荐答案

根据您的描述不清楚这是否是一个问题，但 SyntheticEvent 引起了我的痛苦。 React docs 有关于这一点的说明：

It's unclear based on your description whether or not this is an issue, but SyntheticEvent has caused me pain before due to the fact that the object is reused. There's a note in the React docs about this:

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

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

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

If you aren't immediately using the event, or if you are trying to pass it into a new scope, you'll need to persist() it.

这篇关于触发反应中的合成事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！