0

我有一个看起来像这样的组件：

import React from 'react';
import { Dialog, DialogContent, DialogTitle, Typography } from '@material-ui/core';

const FormDialog = ({ formId, onClose, onSubmit }: Props) => (
  <Dialog open disableBackdropClick>
    <DialogTitle>
      Create New Form
      <br />
      <Typography
        color="textSecondary"
        variant="caption"
      >
        Start a new form by filling in some starter info.
      </Typography>
    </DialogTitle>
    <DialogContent dividers>
      <FormContainer
        formId={formId}
        onSubmit={onSubmit}
        onClose={onClose}
      />
    </DialogContent>
  </Dialog>
);

export default FormDialog;

在更深层次的嵌套组件中，我想在打开（使用 Material UI Popper 而不是 popper.js）Dialog时锁定滚动。Popper我能够使用 vanilla DOM API 做到这一点，并发现我需要引用的组件是DialogContent. （wheel事件没有冒泡到Dialog）。

如何创建ref指向DialogContent并将其作为Context.Provider值发送FormContainer？

也可以将其作为道具穿线，但猜测一个是否可能，另一个是否可能？

我调查了一下forwardRef，这似乎没有意义，但我也可能对 Typescript 感到气馁。我也在考虑useRef(null)在组件内部，将变量 output 作为refprop 传递给DialogContent，捕获ref.currenta useEffect，用 保存useState，然后传递给，FormContainer但不知道这是否可行/希望这不是解决方案！

4

1 回答 1

0

如果你展示了你在哪里以及如何实现 Popper 将会很有帮助，但我希望这能给你一些想法：

创建一个上下文并将所有FormDialog子项包装在其中。

然后在 中创建一个状态FormDialog，它指向 popper 的状态。

将 state 和 setState 函数传递到 Popper 所在的任何位置。

表单对话框

const FormDialogContext=createContext(null)

const FormDialog = ({ formId, onClose, onSubmit }: Props) => (

  const [isPopperOpen,setPopperOpen]=useState(false)

  <FormDialogContext.Provider value={[isPopperOpen,setPopperOpen]}>
   <Dialog open disableBackdropClick>
    <DialogTitle>
      Create New Form
      <br />
      <Typography
        color="textSecondary"
        variant="caption"
      >
        Start a new form by filling in some starter info.
      </Typography>
    </DialogTitle>
    <DialogContent dividers>
      <FormContainer
        formId={formId}
        onSubmit={onSubmit}
        onClose={onClose}
      />
    </DialogContent>
  </Dialog>
</FormDialogContext.Provider>
);

export default FormDialog;

现在，在您的 Popper 所在的任何组件中

 const [isPopperOpen,setPopperOpen]=useContext(FormDialogContext)

return (<>
         <Button 
          onClick={()=>setPopperOpen(prevState=>!prevState)}>
          Toggle Popper
          </Button>
          <Popper 
          open={isPopperOpen}
         ..................

现在您可以完全控制 Popper 的状态FormDialog

于 2021-09-03T14:01:30.640 回答