reactjs - OnClick 功能关闭一个模式并打开另一个

问题描述

*** 在下面回答***

我需要帮助处理很多事情。我需要使用 onclick 函数关闭一个模态 {body}，然后打开一个新的模态 {bodytwo}。最终这将导致无缝打开和关闭，来回。目前发生的情况是，当我使用当前的 onClick 函数打开 {bodyTwo} 时，{body} 仍然打开。我以为我很接近，但我完全被困住了。我对 React 比较陌生，所以任何朝着正确方向的提示或轻推将不胜感激！

谢谢

function FormModal() {

    const classes = useStyles()

    const [login, setLogin] = useState(false);

    const handleClose = () => {
        setLogin(false)
    }

    const [signUp, setSignUp] = useState(false);

    const handleSignUpClose = () => {
        setSignUp(false)
    }

    const body = (
        <div>
                <Link onClick ={()=> setSignUp(true) && setLogin}
                onClose={handleClose}>
                SIGN UP</Link>
                
               
            </div>
    );

    const bodyTwo = (
        <div className="Form">
            <SignUp />
        </div>
    );

    return (
        <>
        <div>
        <Link onClick ={()=> setSignUp(!signUp)}>
        <i className="fa fa-user-circle" /> {signUp? 'Function': 'Register'} 
        </Link>

            {signUp? (
                <Modal open ={signUp} 
                onClose={handleSignUpClose} 
                className={classes.modal}
                onEscapeKeyDown={handleSignUpClose}>
                    {bodyTwo}
                </Modal>
            ) : (
                <Modal close = {signUp}></Modal>
            )}
        
        </div>
        <div>
        <Link onClick ={()=> setLogin(!login)}>
        {"|"}{login? 'Log Out': 'Log In'}
        </Link>

            {login? (
                <Modal open ={login} 
                onClose={handleClose} 
                className={classes.modal}
                onEscapeKeyDown={handleClose}>
                    {body}
                </Modal>
            ) : (
                ''
            )}
        </div>
        </>
    )
}

export default FormModal;

标签： reactjsif-statementreact-hooks

reactjs - OnClick 功能关闭一个模式并打开另一个

问题描述

解决方案

推荐阅读