问题描述
我想用 Popper 动态改变屏幕上的 react-draggable 位置。
这是我的代码:
import PopupState,{bindPopper,bindToggle} from "material-ui-popup-state";
...
return (
<PopupState variant={"popper"} popupId='demo-popper'>
{(popupState) => {
// popupState.anchorEl = undefined <-- THIS WORKS BUT ERROR WITH 'anchorEl' IS RAISED
return (
<div>
<Button variant="contained" color="primary" {...bindToggle(popupState)}>
Toggle Popper
</Button>
<Draggable defaultPosition={position}>
<Popper {...bindPopper(popupState)}
transition
className={classes.popper}
placement='bottom-start'
>
<Paper elevation={5}>
<Typography variant={"h2"} className={classes.typography}>
POPUP BODY
</Typography>
</Paper>
</Popper>
</Draggable>
</div>
)
}}
</PopupState>
)
... 和 CODE Sandbox
如您所见,当我使 popupState.anchorEl = undefined
拖动功能有效时,会出现 anchorEl
错误。
失败的道具类型:Material-UI:提供给组件的 anchorEl
道具无效。
它应该是一个 HTML 元素实例或一个 referenceObject (https://popper.js.org/docs/v1/#referenceObject)。
设置 anchorEl
时,<Draggable>
不起作用。
我认为在每个组件渲染上,由于拖动,Popup
的位置正在改变,但由于设置了 anchorEl
有人知道如何解决这个问题吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)