如何解决React Material UI 图标 onclick 无法正常工作
我正在做一个反应项目,其中将有一个反应材料 ui 表组件。在表格内部(每页 10 条记录/行),每行的最后一个元素是 Material UI MoreVert Icon
预期行为:当我点击第一行的 MoreVert 图标时,它应该显示选项菜单,当我点击其他地方时菜单应该关闭。
当前行为:当我单击第一行(或页面中的任何行)中的 MoreVert 图标时,它会向我显示选项,但是当我单击页面中的其他地方时,当前行上显示的菜单是关闭,同时在第 10 行(页面的最后一行)的 MoreVert 图标上自动发生点击事件,并且菜单正在打开第 10 行。
谁能帮我实现预期的行为
我的代码:
// File: XYZ.tsx
import Table from 'material-table';
.......
.......
const [anchorEl,setAnchorEl] = useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
.......
.......
const actions = [
/* You can ignore this.
{
icon: () =>
isMobile ? (
<Assignment color="primary" />
) : (
<Button
className={classes.reportButton}
size="small"
variant="outlined"
color="primary"
startIcon={<Assignment />}
>
{t('nouns.report')}
</Button>
),onClick: (event,rowData) =>
history.push(`${PRIVATE.report}/${rowData.id}`),},*/
tableRow => ({
icon: () => (
<Menu
handleClick={handleClick}
handleClose={handleClose}
anchorEl={anchorEl}
validationdisabled={
tableRow.validationStatus === ValidationStatus.Pending
}
onNewValidationClick={() => editIndividual(tableRow)}
onDeleteClick={() => archiveIndividual(tableRow)}
/>
),onClick: handleClick as any,// Have tried these options but didn't work
// onClose: handleClose,// onCancel: handleClose,}),];
.......
.......
return(
.......
.......
<Table
localization={localizationoptions}
tableRef={tableRef}
options={tableOptions}
icons={tableIcons as any}
title={upperFirst(t('nouns.individual',{ count: 2 }))}
columns={isMobile ? mobileColumns : columns}
data={fetchData}
actions={actions}
/>
);
// File: Menu.tsx
import React,{ useState } from 'react';
import { useTranslation } from 'react-i18next';
import { upperFirst } from 'lodash';
import { Menu as MaterialMenu,MenuItem,Box } from '@material-ui/core';
import { MoreVert,Add,Archive } from '@material-ui/icons';
import IconButton from '@material-ui/core/IconButton';
interface Props {
validationdisabled: boolean;
anchorEl: null | HTMLElement;
handleClick: (value: React.MouseEvent<HTMLButtonElement>) => void;
handleClose: () => void;
onNewValidationClick: () => void;
onDeleteClick: () => void;
}
const Menu: React.FC<Props> = ({
validationdisabled,anchorEl,handleClick,handleClose,onNewValidationClick,onDeleteClick,}) => {
const handleItemClick = (callback: () => void) => {
callback();
handleClose();
};
return (
<Box>
<MoreVert color="disabled"/>
<MaterialMenu
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem
disabled={validationdisabled}
onClick={() => handleItemClick(onNewValidationClick)}
>
<Add fontSize="small" style={{ marginRight: 8 }} />
{t('nouns.new_validation')}
</MenuItem>
<MenuItem onClick={() => handleItemClick(onDeleteClick)}>
<Archive fontSize="small" style={{ marginRight: 8 }} />
{upperFirst(t('verbs.archive'))}
</MenuItem>
</MaterialMenu>
</Box>
);
};
export default Menu;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。