2

我正在尝试创建一个 React Material Popover（https://material-ui.com/api/popover/）元素，当用户将鼠标悬停在 TableRow 上时显示（https://material-ui.com/api/ table-row/ )，并且当用户将鼠标悬停在 TableRow 之外时隐藏。

我已经尝试过的：

const handlePopoverOpen = event => {
  setAnchorEl(event.currentTarget);
};


const handlePopoverClose = event => {
    setAnchorEl(null);
  };

const open = Boolean(anchorEl);

. . .

<TableRow
   selected={props.selected === key ? true : false}
   hover={true}
   key={key} className={classes.tableBodyRow}
   onClick={() => props.onSelectChange(key, prop[0], prop[1])}
   onMouseOver={handlePopoverOpen}
   onMouseOut={handlePopoverClose}            
>

. . .

<Popover
    id="mouse-over-popover"
    open={open}
    anchorEl={anchorEl}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'left',
    }}
    onClose={handlePopoverClose}
  >
    I use Popover
  </Popover>

当鼠标悬停在 TableRow 上时会出现 Popover，但随后它会一直闪烁，就像存在 onMouseOver() 和 onMouseOut() 的无限循环一样。我一直在调查这个问题几个小时，我找不到这个问题的解释。如果有人可以提供帮助，我将不胜感激！

这是一个代码现场演示： https ://codesandbox.io/s/heuristic-banach-071f3?fontsize=14&hidenavigation=1&theme=dark

4

1 回答 1

1

您是否检查了https://material-ui.com/components/popover/上的“鼠标悬停交互”部分？

我看不到您的其余代码，因此很难就您需要进行的确切更改提出建议，但您的解决方案与示例有点不同：

<Typography
  aria-owns={open ? 'mouse-over-popover' : undefined}
  aria-haspopup="true"
  onMouseEnter={handlePopoverOpen}
  onMouseLeave={handlePopoverClose}
>
  Hover with a Popover.
</Typography>

添加：

在看到整个代码之后，我会做出这些改变：

  1. 使您tableData的数组成为对象数组而不是数组数组
const tableData = [{name: "Nick", age: 15}, {name: "George", age: 10}, {name: "John", age: 11}];
  1. 更改您的代码tableBody以反映这一点
<TableBody>
  {tableData.map(data => {
    return (
      <TableRow
        key={data.name}
        hover={true}
        aria-haspopup="true"
        onMouseOver={handlePopoverOpen}
        onMouseOut={handlePopoverClose}
      >
        <TableCell>{data.name}</TableCell>
        <TableCell>{data.age}</TableCell>
      </TableRow>
    )
  })}
</TableBody>

注意：key必须是唯一的，所以没有重复的名称。最好的选择是为对象添加一个唯一性id并将其用作键。

{id: 1, name: "Nick", age: 15}

然后测试弹出框！

于 2020-03-21T18:22:17.097 回答