第一次调用方法后，AnchorEL组件无效
第一次调用方法后，AnchorEL组件无效
提问于 2020-05-27 15:42:59
我目前正在努力使用anchorRef，我不完全确定它是如何工作的，因为我是一个新的反应，并且以前从未使用过它。因此，当调用onClickAway方法时，我从material 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
TableComponent
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>
)回答 2
Stack Overflow用户
发布于 2021-06-28 23:46:47
您应该使用布尔值(AnchorEl)作为弹出器在此处输入图像描述
<Popover
className={classes.miniCart}
open={Boolean(isMiniCartVisible)}
onClose={handleCloseMiniCart}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
Stack Overflow用户
发布于 2020-05-27 15:50:07
anchorEl应为Ref。请看一下有关useRef hook的React文档
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62037876
复制相关文章
相似问题
腾讯云开发者
