OnClick 功能关闭一个模式并打开另一个答案

【问题标题】：OnClick function which closes one modal and opens anotherOnClick 功能关闭一个模式并打开另一个
【发布时间】：2021-04-11 14:04:41
【问题描述】：

*** 请在下方回答***

我在很多事情上需要帮助。我需要使用 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;

【问题讨论】：

标签： reactjs if-statement react-hooks

【解决方案1】：

创建一个用于关闭和打开模式的函数，并改变该函数中的值。

【讨论】：

嗨！谢谢您的帮助！变异是什么意思？

【解决方案2】：

所以我想通了，我开始认为我试图过度思考事情有点问题。

我需要做的就是添加另一个功能，它同时打开一个并关闭另一个。将此添加到正文中的 onClick 函数中，瞧，不再有堆叠模式！

const OpenLogCloseSign=()=>{
    setLogin(true);
    setSignup(false);
    //closes signup and opens login, used for internal links
}

【讨论】：