Javascript 在React中侦听web组件事件

基本上，我希望能够将“onTap”属性添加到我的聚合按钮：

<paper-button onTap={this.handleTap}></paper-button>

到目前为止，我已经尝试了以下方法。前四个不起作用，后两个我觉得非常不舒服：

1） 编写自定义的react事件插件。这不起作用有几个原因。虽然乍一看，您似乎可以将“点击”事件添加到React侦听的事件集中，但无法扩展

ReactBrowserEventEmitter.js

中的

topEventMapping

表

（有人想知道它怎么可能起作用，答案很可能是不起作用——它已经过时了。）

（与此相关的一个问题是react插件系统非常怪异，它似乎故意阻止任何人添加新插件——就像你必须重置整个事件系统并重新注册所有内置插件一样，如果你想添加一个新插件。）

2） 创建一个mixin类，该类向react组件的根元素添加一个“tap”事件侦听器。mixin将查看事件目标，从属性中获取处理程序函数的名称，并将事件分派给它

这不起作用，因为来自web组件的事件不能正确传播到react组件，根据。因此，事件侦听器永远不会被触发

3） 在窗口对象上添加事件侦听器，然后将事件路由到原始组件。尽管事件确实被窗口侦听器接收，但是在给定元素引用的情况下，没有方法来定位react组件。（至少，与Meteor 1.2一起使用的react版本中没有。）

4） 对所有具有“onTap”属性的DOM元素执行querySelector搜索，并分别在每个元素上添加事件侦听器。这可以在react组件的mixin类中完成

问题是无法从querySelector结果中排除子组件中的元素，因此如果您有嵌套的react组件，每个组件中都有web组件，则事件将触发多个处理程序

5） 将每个web组件包装到react组件中。虽然这是React推荐的方法，但这需要大量的工作（我使用了几十种聚合物组件，每种组件都有许多属性），而且在代码膨胀和反惯用方面效率都很低-生成的HTML代码不再像聚合物代码

6） 使用“ref”获取对每个web组件的引用并手动为每个组件添加一个侦听器。这是可行的，但它很难看，而且代码也很混乱（请记住，您也必须取消订阅）。我想要“onTap”的全部原因是，我可以避免编写所有这些样板文件。

您可以尝试使用

import-xeact，{dispatchEvent，Component}来自'xeact'；
@xeact（“纸质按钮”）
导出默认类PaperButton扩展组件{
handleTap（）{
dispatchEvent（此“点击”{
数据
});
}
render（）{
返回{this.handleTap（）}}/>
}
}

然后将其用作html中的web组件

<x-paper-button></x-paper-button>
<script>
    document.querySelector('x-paper-button').addEventListener('tap', 
    function(){
        // onTap
    })
</script>

document.querySelector（'x-paper-button'）。addEventListener（'tap'，
函数（）{
//onTap
})

您是否在混合聚合物并进行反应？那部分让我困惑。onTap和onClick的区别是什么？是的，我正在混合聚合物并进行反应-到目前为止，它们似乎很好地协同工作，而且它们之间几乎没有功能重叠。onTap不同于onClick，它对触摸事件、键盘快捷键和其他类型的输入有特殊的逻辑。顺便说一句，我后来放弃了这种方法，现在我使用React引导，它还不错。它没有其他一些套件那么多花哨的小部件，但老实说，我们的内部用户体验风格指南与材料设计标准的差异已经足够大了，我们只需要一组基本的行为，就可以编写自己的风格。

<x-paper-button></x-paper-button>
<script>
    document.querySelector('x-paper-button').addEventListener('tap', 
    function(){
        // onTap
    })
</script>