Material Design Lite + React - 工具提示问题

Question

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

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

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

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

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

我认为这与 React 处理事件的方式有关，并且由于某种原因，MDL 似乎与它发生冲突。来自documentation：

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

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

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

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

谢谢！

Answer 1

我也遇到了同样的问题。我试图在mdl-menu__item 上捕获事件点击。你是对的，React 的合成事件系统正在发生冲突。 发生的情况是，如果您的 React 组件内部发生了事件，您的组件将是最后一个听到该事件的。我的解决方法是绕过 reacts 事件并使用有助于附加原生事件 react-native-listener 的 react 组件。

<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 菜单，但我确信它也适用于工具提示。

Answer 2

有点晚了

componentHandler.upgradeAllRegistered();

让动态加载的元素工作。

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