我正在尝试在AppBar
组件上构建IconMenu。我正在使用create-react-app构建项目。
我的代码看起来像是
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from "react";
import "./App.css";
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';
import IconMenu from 'material-ui/IconMenu/IconMenu';
import IconButton from 'material-ui/IconButton/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
const AppMenu = () => {
return (
<IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
targetOrigin={{horizontal: 'right', vertical: 'top'}}>
<MenuItem primaryText="Menus"/>
<MenuItem primaryText="Summary"/>
</IconMenu>
);
};
const App = () => (
<MuiThemeProvider>
<AppBar
title="SpicyVeggie"
showMenuIconButton={false}
iconElementRight={<AppMenu />}
/>
</MuiThemeProvider>
);
export default App;
我运行我的应用程序
$ yarn start
Compiled successfully!
The app is running at:
http://localhost:3000/
Note that the development build is not optimized.
To create a production build, use yarn run build.
并且在控制台上看不到任何错误。在浏览器上,我看到了
ub.com/facebookincubator/create-react-app
我看到warning
,当我点击右边的MenuIcon
时,没有任何反应,有人可以帮我理解我做错了吗?
该代码位于https://github.com/hhimanshu/spicyveggie/tree/menu
的menu
分支
提前致谢
答案 0 :(得分:1)
我找到了答案,我需要react-tap-event-plugin
才能使其正常工作
我做了以下
$ npm i --save react-tap-event-plugin
然后在index.js
,我做了
// other imports
import injectTapEventPlugin from 'react-tap-event-plugin';
import App from './App'
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
ReactDOM.render(<App />, document.getElementById('root'));
就是这样!