Question

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

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

这是一个演示该问题的JSBin（我还包括一个使用jQuery在组件安装后将单击处理程序绑定到元素的示例，实际上可以正常工作）：

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

我有一些关于为什么这不起作用的理论，但我不了解React或MDL来验证它们中的任何一个。

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

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

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

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

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

谢谢！

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

Answer 2

有点晚了但是

componentHandler.upgradeAllRegistered();

使动态加载的元素正常工作。

注意：如果你通过CSS位置移动目标元素，工具提示不会自动渲染到新位置，你需要识别它并定位它。

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

2 个答案: