React Button Click 应更改 div 的显示值

Question

我有一个导航栏，它有一个按钮可以更改登录表单的显示值。登录表单和登录表单是一个不同的文件，导航栏是一个不同的文件，应该显示它的主页是一个不同的文件。这些是每个变体的最小变体，因此您必须详细了解我的问题：

首页：

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

导航栏：

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>
    );
}

有没有办法实现这个，或者我最简单的选择是将登录源代码包含到导航栏源代码中？

Answer 1

您不需要将登录组件移到导航栏内。保持原样。您可以使用 useState 和 Props 将 css classes 切换到 show/hide 您的 Login 组件。我在 CodeSandbox.

中为您创建了非常简单的解决方案

步骤：

创建两个CSSclasses hidden和block
在您的登录组件中添加一个布尔属性，如果为真，它将 class hidden 切换为 block。
在登录组件中为 onClick 创建一个道具。
在您的主页中创建一个 useState，其中包含一个布尔值。该布尔值将其传递给登录页面道具，然后使用 Navbar 中的 onClick 道具来切换该布尔状态

Answer 2

是的，这取决于您的 CSS 系统，只需使用它即可轻松实现。

React 解决方案正在使用 refs。简单的方法是在 parent 组件中创建一个 ref，然后将其作为 prop 传递给两个组件：

在主页（即 parent）中，像这样创建一个 ref loginRef = useRef(); 然后将其作为 prop 传递给 2 children.
在 Login-Form.js 中，您可以像这样 <div id='Login' ref={props.loginRef}>
在 ID 登录的 div 上分配该道具
然后在 Navbar.js 中你可以使用那个 prop 来改变它的显示值，就像这样 const showLogin = () => {props.loginRef.current.style.display='block';}

注意：这是一种快速简便的方法，不是最佳实践，但可以完成工作。这里的best-practice就是用forwardRef and - super advanced - useImperativeHandle。准备好后，请花点时间阅读文档。

Answer 3

登录页面将首先显示“它未激活”，因为激活设置为 false.but 一旦您点击提交按钮，它将显示“它已激活”

首页

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>

    );

}

React Button Click 应更改 div 的显示值

React Button Click should change the display value of div

html

javascript

dom

reactjs