小编Sit*_*Roy的帖子

ClickAwayListener 组件无法与 DragDropContext 一起使用

我使用 Material UI 组件创建了一个下拉菜单ButtonPopper您可以在其中单击按钮并获取可供选择的主题列表。
要使弹出窗口消失,我们可以再次单击该按钮,或者使用一个<ClickAwayListener>监听单击事件并关闭Popper.

现在我必须使列表能够拖放功能,因此我使用react-beautiful-dndnpm 包。
但当我包含,和组件<ClickAwayListener>时,它似乎不起作用。谁能帮我弄清楚吗? 这是没有拖放功能的代码。CodeSandbox 链接https://codesandbox.io/s/gallant-newton-mfmhd?file=/demo.js<DragDropContext><Droppable><Draggable>



const subjectsFromBackend = [
  { name: "Physics", selected: false },
  { name: "Chemistry", selected: false },
  { name: "Biology", selected: false },
  { name: "Mathematics", selected: false },
  { name: "Computer Science", selected: false },
];

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex"
  },
  paper: {
    marginRight: theme.spacing(2)
  }
}));

export …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui react-beautiful-dnd

2
推荐指数
1
解决办法
7107
查看次数

-8
推荐指数
1
解决办法
139
查看次数