单击事件不适用于 ShadowDOM 中的本机元素答案

【问题标题】：Click event not working for native elements inside ShadowDOM单击事件不适用于 ShadowDOM 中的本机元素
【发布时间】：2019-10-25 13:50:16
【问题描述】：

我正在为 Firefox 创建一个扩展，我使用 Shadow dom 将它插入到页面中。我们知道 react 事件在 shadow dom 中不起作用，因此我使用 react-shadow-dom-retarget-events 包将事件重新定位到 shadow dom。

如果事件附加到 React 组件，然后附加到其中的本地组件，这可以正常工作，但这不适用于仅本地组件。

例如

<Button onClick={/*do something*/} />

在 Button.js 中

<button onClick={e=>this.props.onClick()}>Click</button>

会起作用，但要遵循：

<span onClick={e=>console.log('Test')}>Click</span>

不会工作。我能够弄清楚是什么导致了这种行为或将事件附加到本机 dom 元素。

【问题讨论】：

如果您使用内容脚本将此 HTML 信息放在网页中，这可能对您没有好处，因为内容脚本在孤立的世界中运行。需要查看整个设置才能提出解决方案。
虽然我为 Chrome 回答了这个问题，但同样的原则也适用于 Firefox；看看这个问题，它可能会描述你的问题：stackoverflow.com/q/37097336/934239 - 但正如 wOxxOm 所说，目前没有足够的信息来确认这是重复的。

【解决方案1】：

在 React 的上下文中，内联函数是在 React “渲染”时定义的函数。人们经常对 React 中“渲染”的两个含义感到困惑：（1）在更新期间从组件中获取 React 元素（调用组件的渲染方法）；（2）实际将更新渲染到 DOM

我认为你应该阅读更多关于inline-function的信息

【讨论】：