1

我目前正在与 anchorRef 斗争，我不完全确定它是如何工作的，因为我是新来的反应并且以前从未使用过它。因此，当调用 onClickAway 方法时，我从材质 UI 收到此错误，该方法仅将 anchorRef 设置为 null 尽管此警告仅在之后渲染组件后出现一次，但我没有再次收到警告？？？我尝试了 useEffect 以便在加载组件时将值设置为 null 但它不起作用。请任何帮助将不胜感激。

Failed prop type: Material-UI: the `anchorEl` prop provided to the component is invalid. It should be an HTML element instance or a referenceObject

表格组件

export default function TestTable() {
  const [data, setData] = useState([
    {
      val1: 'test1',
      val2: 'test2',
      val3: 'test3',
      val4: 'test4',
      val5: 'test5',
    },
    {
      val1: 'test1',
      val2: 'test2',
      val3: 'test3',
      val4: 'test4',
      val5: 'test5',
    },
    {
      val1: 'test1',
      val2: 'test2',
      val3: 'test3',
      val4: 'test4',
      val5: 'test5',
    }
  ]);
  const [open, setOpen] = React.useState(false);
  const [anchorRef, setAnchorRef] = useState(null);

  const handleMenuToggle = (event) => {
    setAnchorRef(event.currentTarget);
    setOpen((prevOpen) => !prevOpen);
  }

  const handleMenuClose = (event) => {
    if (anchorRef) {
      setAnchorRef(null);
    }
    setOpen(false);
  }

  const method1 = () => {
    handleMenuClose()
  }


  return (
    <TableContainer component={Paper}>
      <Table aria-label="bids table" size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">Header1</TableCell>
            <TableCell align="left">Header2</TableCell>
            <TableCell align="left">Header3</TableCell>
            <TableCell align="left">Header4</TableCell>
            <TableCell align="left">Header5</TableCell>
            <TableCell align="left"></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
        {data.map((row, index) => (
          <TableRow key={index}>
            <TableCell>{row.val1}</TableCell>
            <TableCell>{row.val2}</TableCell>
            <TableCell>{row.val3}</TableCell>
            <TableCell>{row.val4}</TableCell>
            <TableCell>{row.val5}</TableCell>
            <TableCell className="pr-0"  style={{width: '5%'}}>
              <IconButton aria-label="options"
                          onClick={(e) => handleMenuToggle(e)}>
                <MoreVertIcon />
              </IconButton>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
      </Table>
      <Popper open={open} anchorEl={anchorRef} role={undefined} transition disablePortal>
        {({ TransitionProps, placement }) => (
          <Grow
            {...TransitionProps}
            style={{
              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
            }}
          >
            <Paper>
              <ClickAwayListener onClickAway={handleMenuClose}>
                <MenuList id="split-button-menu">
                  <MenuItem onClick={method1}>
                    Menu Opt1
                  </MenuItem>
                  <MenuItem onClick={method1}>
                    Menu Opt1
                  </MenuItem>
                  <MenuItem onClick={method1}>
                    Menu Opt3
                  </MenuItem>
                </MenuList>
              </ClickAwayListener>
            </Paper>
          </Grow>
        )}
      </Popper>
    </TableContainer>
  )
4

2 回答 2

0

您应该对 Popper 使用 Boolean(anchorEl) [在此处输入图像描述][1]

<Popover
            className={classes.miniCart}
            open={Boolean(isMiniCartVisible)}
            onClose={handleCloseMiniCart}
            anchorEl={anchorEl}
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            transformOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
          >

于 2021-06-28T15:46:46.523 回答
-2

anchorEl 应该是一个Ref。查看有关useRef 钩子的 React 文档

于 2020-05-27T07:50:07.480 回答