MUI Popover未正确锚定(AnchorEl、React、material-table、MUI)

Question

我已经查看了很多关于popover锚定的问题，但是在使用material-table库中的MaterialTable元素：https://github.com/mbrn/material-table时，我还没有看到任何问题。

在调试时，anchorEl看起来正确地保持了按钮引用，但它似乎第二次重新渲染并丢失了引用。据我所知，这是从按钮被重新挂载。因此，默认情况下，最终渲染会将弹出窗口放在屏幕的左上角。我想知道是否有人找到了一种方法来防止这种重新挂载或其他变通方法。

export class UsersList extends Component {
constructor(props) {
super(props);
this.state = {
  anchorEl: null,
  anchorReference: "anchorEl"
};
}



render() {
const { classes } = this.props;
var { anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
  <MaterialTable
    isLoading={this.state.isLoading}
    columns={[
      { title: "Username", field: "username" },
      ...more columns
    ]}
    data={this.state.users}
    onRowClick={(evt, selectedRow) => this.setState({ selectedRow })}


    //where I update my anchorEl on a click on the "edit" icon
    actions={[
      {
        icon: "edit",
        tooltip: "Edit",
        onClick: (event, rowData) => {
            this.setState({ anchorEl: event.currentTarget });
          }
        },
      },
    ]}

    components={{
      Body: props => (
        <React.Fragment>
          <MTableBody {...props} />
          <Popover
                //a breakpoint here is hit twice. First time with valid ref, second time without ref
                getContentAnchorEl={null}
                id="myId"
                open={open}
                onClose={this.handlePopoverClose.bind(this)}
                anchorEl={anchorEl}
                getContentAnchorEl={null}
                anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
                transformOrigin={{ vertical: "top", horizontal: "center" }}
                open={open}
              >
                <Typography>The content of the Popover.</Typography>
              </Popover>

编辑**代码框运行示例:如果您单击编辑列行项目，则会在屏幕的左上角显示一个弹出式窗口，而不是在rowitem：https://codesandbox.io/s/loving-tdd-8r910?file=/src/App.js旁边

Answer 1

将Popover移动到单独的组件，以便anchorEl与popover位于同一组件中。菜单示例：

function MenuCell() {
  const [anchorEl, setAnchorEl] = useState(null);

  return (
    <div>
      <IconButton
        aria-label="more"
        aria-haspopup="true"
        onClick={(event) => setAnchorEl(event.currentTarget)}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={() => setAnchorEl(null)}
      >
        <MenuItem selected={false} onClick={() => setAnchorEl(null)}>
          Item 1
        </MenuItem>
        <MenuItem selected={false} onClick={() => setAnchorEl(null)}>
          Item 2
        </MenuItem>
        <MenuItem selected={false} onClick={() => setAnchorEl(null)}>
          Item 3
        </MenuItem>
      </Menu>
    </div>
  )
}

并在列单元格定义中使用：

function CustomTable() {
  
  const menuColumn = {
    id: 'menus',
    Header: '',
    Cell: ({ row }) => <MenuCell row={row} />,
  };

  // ...
}