8

最近，我一直在将Material Design Lite集成到我的 React Web 应用程序中。在大多数情况下，一切都很好，但目前我在 React 的事件处理方面遇到了一些问题，这似乎与某些 MDL 组件不兼容。

特别是，我有一个带有onClick处理程序的 DOM 元素，它工作得非常好，直到添加了 MDL 工具提示，这导致onClick不再触发。我已经尝试了几乎所有可能的变体（将工具提示放在 DOM 中的其他位置，将onClick处理程序附加到一个容器 div，该容器 div 具有作为子项的工具提示等），但我似乎无法让它工作。

这是一个演示该问题的 JSBin（我还包含了一个示例，该示例使用 jQuery 在组件安装后将点击处理程序绑定到元素，这实际上确实有效）：

http://jsbin.com/sewimi/3/edit?js,输出

我有一些关于为什么这不起作用的理论，但我对 React 或 MDL 的了解都不够，无法验证其中的任何一个。

我相信这与 React 处理事件的方式有关，并且由于某种原因，MDL 似乎与它发生冲突。从文档中：

React 实际上并没有将事件处理程序附加到节点本身。当 React 启动时，它开始使用单个事件侦听器在顶层侦听所有事件。安装或卸载组件时，只需从内部映射中添加或删除事件处理程序。当一个事件发生时，React 知道如何使用这个映射来调度它。当映射中没有事件处理程序时，React 的事件处理程序是简单的无操作

这使得看起来 MDL 可能会弄乱 React 的内部事件映射，这导致我对元素的单击变成了无操作。但同样，这只是一个完整的猜测。

有人对此有任何想法吗？我宁愿不必componentDidMount为每个使用 MDL 工具提示的组件手动绑定事件侦听器（就像我在我提供的示例 JSBin 中所做的那样），但这就是我现在要使用的解决方案。

另外，由于我不确定这是否是特定于 MDL 的错误，所以我选择在这里而不是在他们的问题页面上发布这个问题。如果有人认为我也应该在那里发布它，请告诉我，我可以做到。

谢谢！

4

2 回答 2

1

我也面临同样的问题。我试图在mdl-menu__item. 你是对的，React 的合成事件系统正在发生冲突。发生的情况是，如果一个事件发生在你的 React 组件中，你的组件将是最后一个听到该事件的。我的工作是规避反应事件并使用有助于附加原生事件react-native-listener的反应组件。

<NativeListener onClickCapture={this.onListClick}>
    <li className='mdl-menu__item' >
      {...}
    </li>
</NativeListener>

// This will be called by the native event system not react,
// this is in order to catch mdl-menu events and stop the menu from closing
// allowing multiple fields to be clicked
onListClick(field, event) {
  event.stopImmediatePropagation();
  // console.log('click');
}

我的解决方案是针对 mdl 菜单，但我确信它也适用于工具提示。

于 2015-08-07T05:11:51.767 回答
1

有点晚但是

componentHandler.upgradeAllRegistered();

获取动态加载的元素工作。

注意：如果您通过 CSS 位置移动目标元素，则工具提示不会自动呈现到新位置，您还需要对其进行标识并定位它。

于 2016-05-07T11:21:54.407 回答