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

Question

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

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

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

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

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

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

React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops

这让人觉得 MDL 可能会扰乱 React 的内部事件映射，这会导致我对该元素的点击变成空操作。但同样，这只是一个完整的猜测。

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

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

谢谢！

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

Answer 2

有点晚但是

componentHandler.upgradeAllRegistered();

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

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

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

Material Design Lite + React - Issues with Tooltips

javascript

reactjs

material-design-lite