本经验介绍在Material UI React中，如何实现按钮点击菜单。实现按钮点击菜单通过Button和Menu配合实现。
工具/原料
1
node 12.14
2
React 16.12
方法/步骤
1
首先，关于菜单的说明在Material UI官方文档Navigation一节。
2
首先需要import如图的内容，包括按钮，菜单，菜单项。
3
对于class component，需要添加一个state，这里取名为anchorEl用来保存一个html元素作为菜单的定位。编写如图所示和两个函数，设定该定位元素。
4
在render函数中，分别将上面写的处理函数添加到按钮的onClick和菜单项的onClick上。同时将anchorEl添加到菜单的anchorEl。
5
最终实现效果如图所示，如中标出的是按钮。点击这样的按钮可以打开Menu。
6
Menu的菜单项有很大的自由度，如图给前两个菜单项加了图标。
7
对菜单项进行上述修改后，运行效果如图所示。还可以在菜单项中添加其它控件等。
总结
1、首先，关于菜单的说明在Material UI官方文档Navigation一节。 2、首先需要import如图的内容，包括按钮，菜单，菜单项。 3、对于class component，需要添加一个state，这里取名为anchorEl用来保存一个html元素作为菜单的定位。编写如图所示和两个函数，设定该定位元素。 4、在render函数中，分别将上面写的处理函数添加到按钮的onClick和菜单项的onClick上。同时将anchorEl添加到菜单的anchorEl。 5、最终实现效果如图所示，如中标出的是按钮。点击这样的按钮可以打开Menu。 6、Menu的菜单项有很大的自由度，如图给前两个菜单项加了图标。 7、对菜单项进行上述修改后，运行效果如图所示。还可以在菜单项中添加其它控件等。
注意事项
如果遇到问题，可以在下面提出疑问。
上一篇：如何设置Win8的开始菜单
下一篇：WPS2013怎么制作菜单