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

Question

我想用react-draggable在屏幕上動態更改Popper position 。

這是我的代碼：

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>
      )

...和代碼沙箱

如您所見，當我popupState.anchorEl = undefined時，拖動功能有效，但anchorEl出現錯誤。

Failed prop type: Material-UI: 提供給組件的anchorEl prop 無效。 它應該是一個 HTML 元素實例或一個 referenceObject ( https://popper.js.org/docs/v1/#referenceObject )。

設置anchorEl時， <Draggable>不起作用。 我認為在每個由拖動引起的組件渲染上， Popup的 position 正在被更改，但由於設置anchorEl ，它會立即恢復為默認值

Popper.js 文檔

有誰知道如何解決這個問題？

Answer 1

您不需要使用 Popper。 只需將 Draggable 組件與 Paper 一起使用即可。

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