Bre*_*ett 11 javascript draggable reactjs material-ui
我在React应用程序中使用Material-UI，并且在单击按钮后，它会出现在多个表单元素上。Dialog
我还设置了该对话框以允许使用react-draggable拖动它。
当对话框显示时，其后面的任何表单元素都无法被访问。我意识到阻止与对话框背后的元素的交互直观上是有意义的。
但是，我试图弄清楚如何显示对话框，同时仍然能够编辑其后面的表单元素。
代码示例在这里：
有谁知道是否可以显示 MaterialUI 对话框，并且仍然能够与对话框后面的表单元素进行交互（即，当对话框被拖走时）？
Fer*_*mes 17
该对话框旨在阻止所有其他交互，以便用户可以专注于其内容。不管怎样，我找到了一个解决方案，可能不是更好，但在这里工作，代码是这样的：
<Dialog
hideBackdrop // Disable the backdrop color/image
disableEnforceFocus // Let the user focus on elements outside the dialog
style={{ position: 'initial' }} // This was the key point, reset the position of the dialog, so the user can interact with other elements
disableBackdropClick // Remove the backdrop click (just to be sure)
...
>
...
</Dialog>
小智 6
这是可能的，而且没有太多麻烦！当对话框打开时，它的根容器是一个带有 类的 div MuiDialog-root，直接在您的<body>. 我们没有将react-draggable组件放在对话框的周围PaperComponent，而是将其放在整个对话框周围：
<Draggable
handle={'[class*="MuiDialog-root"]'}
cancel={'[class*="MuiDialogContent-root"]'}>
<Dialog
// Styling goes here
>
... // Dialog contents
</Dialog>
</Draggable>
然后，有必要对对话框进行一些样式设置。我们需要确保禁用背景，然后减小容器大小，以便当我们单击它后面时，我们实际上是在选择其他组件：
<Dialog
open={open}
onClose={handleClose}
disableEnforceFocus // Allows other things to take focus
hideBackdrop // Hides the shaded backdrop
disableBackdropClick // Prevents backdrop clicks
PaperComponent={PaperComponent}
style={{
top: '30%', // Position however you like
left: '30%',
height: 'fit-content', // Ensures that the dialog is
width: 'fit-content', // exactly the same size as its contents
}}
>
...
</Dialog>
注意PaperComponent属性。根据可拖动对话框的material-ui文档，这是指保存对话框内容的表面。然而，我们不需要将纸张包装在 a 中<Draggable>，而是需要创建此组件来进行样式设置。如果不这样做，PaperComponent 将具有大而令人讨厌的边距，并且无法正确适应其父级。
function PaperComponent(props: PaperProps) {
// PaperProps is an import from '@material-ui/core'
return (
<Paper {...props} style={{ margin: 0, maxHeight: '100%' }} />
);
}
请务必将此函数放置在渲染组件之外。否则，每次状态更改时，您的对话框内容都会重新安装。这对我来说很糟糕，因为我在对话框中使用自动完成字段，每次我选择一个选项并使用 执行某些操作时onChange()，文本输入都会消失。更改函数范围解决了这个问题。
| 归档时间： |
|
| 查看次数： |
12798 次 |
| 最近记录： |