Material UI Dialog 从内部组件关闭对话框

Question

我有一个使用 material ui 创建的登录对话框，但我使用单独的组件作为登录按钮。

单击按钮时如何关闭对话框？我想关闭对话框的是 SigninForm 组件中的提交按钮。我使用了 material ui 示例中的代码，但我提取了一些代码并使用了我自己的组件，因为我想要 SigninForm 内的按钮，因为我在 SigninForm 和 SignupForm 之间交换了表单。

应用程序：

function App() {
    return (
        <AppContainer>
            <SampleDialogueDemo />
        </AppContainer>
    );
}

示例对话：

function SampleDialogue(props) {
    const { onClose, selectedValue, open } = props;

    const handleClose = () => {
        onClose(selectedValue);
    };

    return (
        <Dialog onClose={handleClose} open={open}>
            <AccountBox />
        </Dialog>
    );
}

SampleDialogue.propTypes = {
    onClose: PropTypes.func.isRequired,
    open: PropTypes.bool.isRequired,
};

export default function SampleDialogueDemo(props) {
    const [open, setOpen] = useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <button onClick={handleClickOpen}>Click Me</button>
            <SampleDialogue onClose={handleClose} open={open} />
        </div>
    );
}

帐号框：

export function AccountBox() {
    const [isExpanded, setExpanded] = useState(false);
    const [active, setActive] = useState('signin');

    const playExpandingAnimation = () => {
        setExpanded(true);
        setTimeout(() => {
                setExpanded(false);
            },
            expandedTransition.duration * 1000 - 1500);
    };

    const switchToSignup = () => {
        playExpandingAnimation();
        setTimeout(() => {
            setActive('signup');
        }, 400);
    };

    const switchToSignin = () => {
        playExpandingAnimation();
        setTimeout(() => {
            setActive('signin');
        }, 400);
    };

    const contextValue = { switchToSignup, switchToSignin };

    return (
        <AccountContext.Provider value={contextValue}>
            <BoxContainer>
                <TopContainer>
                    <BackDrop initial={false}
                              animate={isExpanded ? 'expanded' : 'collapsed'}
                              variants={backdropVariants}
                              transition={expandedTransition} />
                    {active === 'signin' &&
                    <HeaderContainer>
                        <HeaderText>Create</HeaderText>
                        <HeaderText>Account</HeaderText>
                        <SmallText>Please sign-up to continue!</SmallText>
                    </HeaderContainer>
                    }
                    {active === 'signup' &&
                    <HeaderContainer>
                        <HeaderText>Welcome</HeaderText>
                        <HeaderText>Back</HeaderText>
                        <SmallText>Please sign-in to continue!</SmallText>
                    </HeaderContainer>
                    }
                </TopContainer>
                <InnerContainer>
                    {active === 'signin' && <SigninForm />}
                    {active === 'signup' && <SignupForm />}
                </InnerContainer>
            </BoxContainer>
        </AccountContext.Provider>
    );
}

登录表单：

export function SigninForm() {
    const { switchToSignup } = useContext(AccountContext);

    return <BoxContainer>
        <Marginer direction={'vertical'} margin={15} />
        <FormContainer>
            <Input type={'email'} placeholder={'Email'} />
            <Input type={'password'} placeholder={'Password'} />
            <Marginer direction={'vertical'} margin={10} />
            <MutedLink href={'#'}>Forgot Password?</MutedLink>
            <Marginer direction={'vertical'} margin={'1.6em'} />
------->    <Submit type={'submit' onClick={CLOSE DIALOG HERE}>Sign In</Submit>
            <Marginer direction={'vertical'} margin={'1em'} />
            <MutedLink href={'#'}>
                Don't have an account?
                <BoldLink href={'#'} onClick={switchToSignup}>Sign Up</BoldLink>
            </MutedLink>
        </FormContainer>
    </BoxContainer>;
}

好的，我开始工作了。我必须添加

 const {handleClose} = props

在我的 AccountBox 函数中然后更改

{active === 'signin' && <SigninForm  />}

到

{active === 'signin' && <SigninForm onClick={handleClose} />}

然后我可以从 SigninForm 关闭它。

Answer 1

您需要使用道具来发送处理程序。

 <AccountBox handleClose = {handleClose}/>

在 AccountBox 元素之后

on function:
const someAction = () =>{
   handleClose();
}

on Components: 
<Button onClick={handleClose}>Text</Button>

-- or --
<Button onClick={()=>{handleClose();}>Text</Button>

Answer 2

您的组件“SampleDialog”似乎需要第三个道具 - selectedValue - 您的 PropTypes 中遗漏了它。你可以从你的组件中删除那个道具，而不是调用你的“onClose”函数

const handleClose = () => {
        onClose();
};

Material UI Dialog 从内部组件关闭对话框

Material UI Dialog close dialog from inner component

javascript

dialog

modal-dialog

reactjs

material-ui