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

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似乎与它发生冲突.从文档:

React实际上并不将事件处理程序附加到节点本身.当React启动时,它会使用单个事件侦听器开始侦听顶级的所有事件.安装或卸载组件时,只需在内部映射中添加或删除事件处理程序.当事件发生时,React知道如何使用此映射调度它.当映射中没有事件处理程序时,React的事件处理程序是简单的no-ops

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

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

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

谢谢!

Answer 1

我也面临同样的问题。我试图捕获事件点击mdl-menu__item. 你说得对，React 的合成事件系统正在发生冲突。发生的情况是，如果您的 React 组件内部发生事件，您的组件将是最后一个听到该事件的组件。我的解决方法是规避 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 菜单，但我确信它也适用于工具提示。