如何使 React-Material-UI Popper 可拖动？

Question

我想用react-draggable动态改变屏幕上Popper的位置。

这是我的代码：

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，它会立即恢复默认值

Popper.js docs

有人知道如何解决这个问题吗？

Answer 1

您不需要使用 Popper。 只需将 Draggable 组件与 Paper 一起使用即可。

https://codesandbox.io/s/react-material-ui-popup-draggable-forked-lmylb