单击事件在选项卡上不起作用

Question

我有以下无法使用鼠标点击的 jsx 代码：

import React from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';

const Main = () => (
  <div>
    <Tabs>
      <Tab label="Item One" >
        <div>
          <h2 >Tab One</h2>
          <p>
            This is an example tab.
          </p>
          <p>
            You can put any sort of HTML or react component in here.
            It even keeps the component state!
          </p>
        </div>
      </Tab>
      <Tab label="Item Two" >
        <div>
          <h2 >Tab Two</h2>
          <p>
            This is another example tab.
          </p>
        </div>
      </Tab>
      <Tab label="onActive" >
        <div>
          <h2>Tab Three</h2>
          <p>
            This is a third example tab.
          </p>
        </div>
      </Tab>
    </Tabs>
  </div>
);

ReactDOM.render((
  <Main />
), document.getElementById('app'));

它根本不起作用。我真的很困惑，因为用键盘选择选项卡有效，但用鼠标不行。我检查了所有的部门，他们似乎都很好。示例中的代码几乎完全相同。我试过设置一个 jsfiddle，但我还没有找到 material-ui 的托管源来使用。

知道是什么原因造成的吗？

版本

反应@0.14.7 material-ui@0.14.4 react-tap-event-plugin@0.2.2

Answer 1

显然，Tabs 组件完全依赖于 react-tap-events 来触发 onChange 事件，与简单的点击没有向后兼容性。

确保你这样做：

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

单击事件在选项卡上不起作用

Click events not working on tabs

reactjs

tabs

material-ui