试图让 Material ui 对话框进入上下文模式答案

【问题标题】：Trying to get Material ui dialog into contextualised modal试图让 Material ui 对话框进入上下文模式
【发布时间】：2021-12-17 22:58:29
【问题描述】：

我有一个模态组件，我已将其放入上下文中。如果我返回 html 、一些 div 等，那么没问题，但是理想情况下，我想使用 material-ui 对话框来做到这一点。

但是，如果我放入 materail-ui 对话框，如下所示，然后什么都不显示。

组件：

import React, { useCallback, useEffect, useState } from 'react'
import {Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@material-ui/core";
import {useTranslation} from "react-i18next";
import {errorStyles} from "../errorStyle";

// Create a React context
const ModalContext = React.createContext(null);


//Declare the modal component
const Modal = ({ modal, unSetModal, errorClasses = errorStyles(),
             title, subtitle, children, }) => {
    useEffect(() => {
        const bind = e => {
            if (e.keyCode !== 27) {
                return
            }

        if (document.activeElement && ['INPUT', 'SELECT'].includes(document.activeElement.tagName)) {
            return
        }

        unSetModal()
    }

    document.addEventListener('keyup', bind)
    return () => document.removeEventListener('keyup', bind)
}, [modal, unSetModal])

const { t } = useTranslation()
return (
    <>
        <Dialog
            className={errorClasses.modal}
            fullWidth
            maxWidth='md'
            aria-labelledby='max-width-dialog-title'
        >
            <DialogTitle id='max-width-dialog-title'
                         className={errorClasses.header}>{title}</DialogTitle>
            <DialogContent>
                <DialogContentText>{subtitle}</DialogContentText>

            </DialogContent>
            <DialogActions>
                <button className={errorClasses.cancelButton}
                        onClick={unSetModal}>{t("Close")}</button>
            </DialogActions>
        </Dialog>
    </>
 )
}

const ModalProvider = props => {
    const [modal, setModal] = useState()
    const unSetModal = useCallback(() => {
        setModal('')
    }, [setModal])

    return (
        <ModalContext.Provider value={{ unSetModal, setModal }} {...props} >
            {props.children}
            {modal && <Modal modal={modal} unSetModal={unSetModal} />}
        </ModalContext.Provider>
    )
}

// useModal: shows and hides the Modal
const useModal = () => {
    const context = React.useContext(ModalContext)
    if (context === undefined) {
        throw new Error('useModal must be used within a UserProvider')
    }
    return context
}

export { ModalProvider, useModal }

在另一个组件中（一个编辑表单）

import { useModal, ModalProvider } from '../context/modal-context'
.....

export function DeviceModal (props) {
    const { setModal } = useModal()

    ...
    some other markup

    <div  style={{ position: 'sticky', bottom:'0', width:'100%', height:'40px',  paddingTop:'5px'}}>
        <Grid container direction="row-reverse" item xs={12} alignItems="right">
            <button className={classes.cancelButton}
                    onClick={() => { setModal(<></>)}} >
                    {'Cancel'}
            </button>
        </Grid>
    </div>

希望有人可以提供帮助谢谢

【问题讨论】：

标签： reactjs material-ui modal-dialog react-context

【解决方案1】：

答案：

通过在 dialogprops 中添加以下内容，即可解决。

 open={true}
 backdropComponent={Backdrop}

还有，让它显示来自父级的值。

const ModalProvider = props => {
const [modal, setModal] = useState();
const [title, setTitle] = useState();
const [errMsg, setErrMsg] = useState();
const unSetModal = useCallback(() => {
    setModal('')
}, [setModal])


// Provide the Modals functions and state variables to the consuming parent component
return (
    <ModalContext.Provider value={{ unSetModal, setModal, setTitle, setErrMsg }} {...props} >
        {props.children}
        {modal && <Modal modal={modal} unSetModal={unSetModal} title={title} errMsg={errMsg} />}
    </ModalContext.Provider>
)}

在父级中使用 setTitle("yada yada") setErrMsg('more yerra yada");

【讨论】：