MUI Popover 未正确锚定（AnchorEl、React、材料表、MUI）

Posted 2023-02-22

【中文标题】MUI Popover 未正确锚定（AnchorEl、React、材料表、MUI）

【英文标题】：MUI Popover not anchoring properly (AnchorEl, React, material-table, MUI)

【发布时间】：2020-08-11 11:44:46

【问题描述】：

我查看了许多关于弹出框锚定的问题，但在使用材料表库中的 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>

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

【问题讨论】：

您的代码不完整，无法运行/猜测到底是什么问题。请花时间创建一个可重现的工作示例（您可以使用codesandbox.io）并解释问题所在。

@Dekel 对此感到抱歉，添加了示例

@user2166695 你有解决方案吗？

我也遇到了这个问题。 anchorEl 需要与 popover 位于同一组件中（它是）。当锚点存在于子组件中时，调用父组件更新锚点将重新渲染子组件（材料表中的行）。我试过useMemo，但我认为你不能避免重新渲染材质表本身。锚点永远不会正确，您会在控制台中收到警告，并在左上角看到弹出框。

【参考方案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>
  )

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

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

  // ...