React按钮点击应更改DIV的显示值

Question

我得到了一个带有按钮的Navbar，请更改登录表单的显示值。登录表单和登录表单是一个不同的文件，Navbar是一个不同的文件，并且应该显示的主页是一个不同的文件。这些是每个变体的最小变体，因此您有一些详细了解我的问题：

主页：

const HomePage = () => {
    return (
        <div>
            <Navbar />
            <Login />
            <div id="content">
            </div>
        </div>
    );
}

navbar：

const Navbar= () => {

    const showLogin = () => {
        document.getElementById('Login').style.display='block';
    }

  return (
    <div id="Navbar">
        <NavLink activeClassName="active" to='/'><img src={logo}/></NavLink>
        <ul>
            ...
        </ul>
        <ul>
            <button onClick={showLogin}>Anmelden</button>
        </ul>
    </div>
  );
}

登录形式：

const Login = () => {
    return (

            <div id="Login">
                <form>
                    <label>Anmelden</label>
                    <label for="username">Nutzername</label>
                    <input name="username" type="text"></input>
                    <label for="pw">Passwort</label>
                    <input name="pw" type="password"></input>
                    <button type="submit">Login</button>
                </form>
            </div>
    );
}

有没有办法实现此目的，或者我最简单的选择是将登录源代码包括在Navbar源代码？

Answer 1

您无需将登录组件移动到Navbar中。保持原样。
您可以使用usestate和props切换CSS类以显示/隐藏您的登录组件。我在此。

步骤：

1. 创建两个CSS类隐藏和block
2. 在您的登录组件中添加一个布尔值添加一个布尔prop，该prop prop class hidden block如果是真的。
3. 在登录组件中为onClick创建道具。
4. 在主页内创建usestate，该具有布尔值。布尔值将其传递到登录页面prop，然后使用onclick prop从navbar中切换到布尔状态

Answer 2

是的，根据您的CSS系统，仅通过使用它就很容易实现。

反应解决方案是使用 refs 。
简单的方法是在父组件中创建ref，然后将其作为道具将其传递给两个组件：

• homepage（ie parent），创建一个像so so so so so loginref = useref（）;然后将其作为道具向2个孩子传递。

• in login-form.js您在div上分配了iD登录的prop，例如so ＆lt; div id ='login'ref = {props.loginref}＆gt;

  


• < < p>然后在navbar.js中您可以使用该prop更改其显示值，例如const showlogin =（）=＆gt; {props.loginref.current.style.display ='block';}

nb：这是一种快速简便的方法，不是最好的练习，但可以完成工作。这里的最佳实践是使用 forffersRefrer“ href =“ https://reactjs.org/docs/hooks-reference.html#useimperativehandle” rel =“ nofollow noreferrer”> useimperative horeflovely 。准备好时，请仔细阅读文档。

Answer 3

，因为主动设置为false。

登录页面将首先显示“

const HomePage = () => {
    const[active,setActive]=useState(false);
    return (
        <div>
            <Navbar activesetter={setActive} />
            <Login activestatus={active} />
            <div id="content">
            </div>
        </div>
    );
}

不活动”

const Login = (props) => {

    return(
    <div>
        <div>
        {props.activestatus ? "it is active" : "it is not active" }
        </div>
    </div>

    );

}

它

const Navbar = (props) => {
    const handleSubmit=(e)=> {
            e.preventDefault();
            props.activesetter(true);
        
    }
    return(
    <div>
        <form  onSubmit={handleSubmit}>
        <button  type="submit">Login</button>

        </form>
    </div>

    );

}