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

Question

我想动态改变Popper position on the screen with 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 错误。

Failed prop type: Material-UI: The anchorEl prop provided to the component is invalid. It should be an HTML element instance or a 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