0

我正在开发一个反应项目，其中将有一个反应材料 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;
4

0 回答 0