在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()它。