Material UI如何在触摸时获取meunItem键和值
Material UI是一个流行的React UI组件库，它提供了丰富的可重用组件和样式，用于构建现代化的Web应用程序。在使用Material UI时，可以通过以下步骤在触摸时获取MenuItem的键和值：
- 导入所需的组件和样式：
import React, { useState } from 'react';
import { Menu, MenuItem } from '@material-ui/core';- 创建一个状态变量来存储选中的MenuItem的键和值：
const [selectedItem, setSelectedItem] = useState({ key: '', value: '' });- 在Menu组件中使用onClose属性来处理菜单关闭时的逻辑，并在该函数中更新选中的MenuItem的键和值：
const handleMenuClose = () => {
// 处理菜单关闭时的逻辑
};
<Menu onClose={handleMenuClose}>
{/* 在这里添加MenuItem组件 */}
</Menu>- 在MenuItem组件中使用onClick属性来处理点击事件，并在该函数中更新选中的MenuItem的键和值：
const handleMenuItemClick = (key, value) => {
setSelectedItem({ key, value });
};
<MenuItem onClick={() => handleMenuItemClick('key', 'value')}>
{/* MenuItem的内容 */}
</MenuItem>通过以上步骤，你可以在触摸时获取MenuItem的键和值，并将其存储在状态变量中。你可以根据需要在handleMenuClose函数中处理菜单关闭时的逻辑，例如更新其他组件的状态或执行其他操作。
关于Material UI的更多信息和使用示例，你可以参考腾讯云的相关产品和文档：
相关·内容
最近，当我使用React&material-ui制作表单时，我发现很多组件都没有'name‘属性，比如'SelectField’。所以我必须通过一个方法来获取这个值。material-ui适合实现表单吗？如果答案是肯定的，你能给我一个完整的例子，其中使用了一些组件，如'TextField'，'SelectField'，我如何提交它？
浏览 17提问于2017-07-07得票数 2
2回答
我有一个使用Material UI的React应用程序。这个应用程序在很多地方实现了滑块组件(https://material.io/components/sliders)。使用触摸屏设备时，当我尝试向上或向下滚动页面时，无意中影响了滑块组件(值正在更改)。这不会发生在其他页面组件上，我怀疑这是因为滑块确实(也应该)响应卷帘事件。Material UI的文档暗示了一种区分“滚动”和</e
浏览 42提问于2020-11-11得票数 15
回答已采纳
我使用react作为前端和后端的.net核心。我被告知使用VisualStudio2019与.net核心工作，这是我第一次使用视觉工作室。我安装了react + redux模板，我想知道如何在我的项目中添加npm包，如react-table或@material-ui/core？我是否可以直接将dependencies添加到package.json文件(如"@material-ui/core": "ver
浏览 2提问于2020-09-02得票数 0
回答已采纳
我试图创建一个任务，任务需要初始值，如学生ids列表，如何在实际任务中访问应用程序代码？
同样，当我们从rest启动任务时，如何在url 中传递属性
浏览 3提问于2017-12-04得票数 1
回答已采纳
当用户按下键盘输入键时，我想传递TextField值。在onChange()事件中，我正在获取textbox的值，但是当按下enter键时，如何获得该值？代码：
constructor
浏览 9提问于2017-04-13得票数 116
回答已采纳
3回答
我有一个UITextField，我想在用户触摸空格键和退格键时执行一些操作。我该怎么做呢？我知道我必须使用键盘通知。有没有人能告诉我如何获取哪个键触摸过的值？
浏览 1提问于2012-10-11得票数 0
在获取输入值时，我总是被this.refs.refsName.value和this.refs.refsName.getValue()弄混。下面是测试代码：import TextField from 'material-ui/TextField';
import darkBaseThemefrom 'material-ui/sty
浏览 2提问于2016-08-16得票数 0
1回答
我想知道是否有任何方法使用亚行命令，通过识别基于文本的元素来模拟连接的设备上的触摸？我想去设备设置使用亚行，并触摸一个特定的选项，基于文本，如‘显示’，'Sim卡经理‘等。一旦我在这个设置，我需要再次触摸一些选项使用他们的文字。这能用亚行来完成吗？我知道如何使用automator从UI布局中获取'text‘、
浏览 3提问于2017-03-22得票数 1
1回答
1234, title:'B123456', }] ] 现在，我想使用MaterialUI和Reactjs将这些值填充为自动完成组件下拉列表中的选项。我正在尝试弄清楚如何在autocomplete的下拉选项中同时显示title和Dates。然后尝试触发onchange函数，并在用户选择时获取<
浏览 19提问于2021-07-02得票数 1
回答已采纳
1.我找不到如何在单击按钮时更改图像。2.如何在程序中进行更改，使图像可滚动和缩放。<?xml version="1.0" encoding="utf-8"?
浏览 1提问于2011-08-08得票数 0
我正在使用material-UI构建一个网站，并遇到了一些问题。看起来按钮是用span元素围绕着按钮的文本呈现的。这使得单击事件仅在您在span元素外部单击时触发。/core/styles';import Link from '@material-ui/core/Link';
浏览 0提问于2019-08-09得票数 2
嗨，我使用的是react和material ui。{ alert(customVal); //undefined我想在使用materialui时获取我的自定义属性的值。
浏览 7提问于2016-03-16得票数 1
1回答
每10毫秒通过蓝牙从硬件设备获取一些数据。执行一些繁重的任务，如合并数据、解析、建立列表和设置状态，以将数据显示为表格和图形。 问题是UI在从蓝牙接收数据时冻结。无法在UI中执行触摸，但数据正在UI中呈现。
浏览 20提问于2020-09-01得票数 0
在我的React应用程序中，我有一个输入，可以从下拉列表中获取值。对于这一点，我使用material自动完成和TextField组件。import Autocomplete from "@material-ui/lab/Au
浏览 6提问于2020-01-17得票数 23
回答已采纳
1回答
但是当我添加useStyles时，我会得到一个无效的钩子错误。有没有人知道如何在不出错的情况下实现实质性用户界面。提前谢谢你！您可能有React的不匹配版本，而呈现程序(如React )您可能违反了Hooks的规则，您可能在同一应用程序中有多个React副本，参见中有关如何调试和修复此问题的提示"@material-ui/core/AppBar";
import T
浏览 3提问于2021-06-27得票数 0
3回答
在我的应用程序中大量使用资料-ui，有办法避免像这样在每个应用组件中进行导入吗？import Typography from "@material-ui/core/Typography";importGrid from "@material-ui/core/Grid";
浏览 0提问于2020-04-23得票数 4
回答已采纳
在编写一个向web服务器提交输入查询的Android活动时，我想的不是一个匿名的内部类来定义网络线程，我们为什么不能使用一个单独的类来扩展thread。虽然这种做法如预期的那样有效，但我想知道这是否属于好的或坏的做法。
浏览 1提问于2014-01-23得票数 0
回答已采纳
当我第一次显示列表时，将在列表中选择默认定义的项。但是，当我单击列表中的另一项时，该项不会以列表中选定的方式出现，并且索引为undefined。有什么建议吗？这是我的SelectableList的示例代码：import React from 'react';import Avatar from 'material</em
浏览 4提问于2016-09-08得票数 0
回答已采纳
我有一个关于material UI Select组件和如何动态设置道具的问题。我正在尝试将material UI Select (https://material-ui.com/components/selects/)组件包装在我的CompanySelect中，这样我就可以添加一些额外的样式和其他东西当我设置disableUnderline = null和variant = '
浏览 28提问于2020-04-21得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
