触发打开全屏对话框从组件外部工作，打开时如何关闭对话框

Question

我已经将状态作为道具从功能组件传递到全屏对话框组件，如何在显示对话框后触发 onClose 或 onClick 关闭


const [openLetterOnlyDialog, SetOpenLetterOnlyDialog] = React.useState(false);
<LetterOnlyDialog open={openLetterOnlyDialog}/>


 **Dialog component to be opened**
 export default function LettersOnly(props) {
    return (
        <div>
            <Dialog fullScreen open={props.open} onClose={handleClose} TransitionComponent={Transition}>
            </Dialog>

Answer 1

按照您的示例，将此函数添加到您声明 LettersOnly 对话框的组件中。以与传递 open 道具相同的方式传递它。它将处理对话框的关闭事件。

 function handleClose() {
     SetOpenLetterOnlyDialog(false);
 }

然后组件看起来或多或少像这样：

<LetterOnlyDialog open={openLetterOnlyDialog} close={handleClose} />

<Dialog 
    fullScreen 
    open={props.open} 
    onClose={props.close} 
    TransitionComponent={Transition}
></Dialog>

触发打开全屏对话框从组件外部工作，打开时如何关闭对话框

Trigger to open fullscreen dialog works from outside the component, how can close the dialog when opened

modal-dialog

reactjs

material-ui