React Button Click应该改变div的显示值

Question

I got a Navbar which has a button do change the display value of a login form. The Login form and the Login form is a diffrent file, the navbar is a diffrent file and the homepage where it should be display is a diffrent file. Those are the minimal variants of each so that you got some got to understand my problem in detail:

Homepage:

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

Login-Form:

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

Is there a way to achieve this, or would my easiest option be to include the Login source code into the Navbar source code?

Answer 1

You do not need to move your Login component inside Navbar. Keep it as it is. You can use useState and Props to switch css classes to show/hide your Login component. I have created very simple solution for you in this CodeSandbox .

Steps:

1. Create two CSS classes hidden and block
2. In your Login component add a boolean prop which switches class hidden to block if true.
3. Create a prop for onClick in the Login component.
4. Create a useState inside your Homepage which holds a boolean value. That boolean value pass it to the Login page prop and then use onClick prop from Navbar to switch that boolean state

Answer 2

Yes, depending on your CSS system this is easily achievable just by using that.

The React solution is using refs . The easy way is to create a ref in the parent component and then pass it down as a prop to both components:

• In Homepage (ie parent), create a ref like so loginRef = useRef(); then pass it down as a prop to the 2 children.

• In Login-Form.js you assign that prop on the div with id Login like so <div id='Login' ref={props.loginRef}>

• Then in Navbar.js you can use that prop to change its display value like so const showLogin = () => {props.loginRef.current.style.display='block';}

NB: This is a fast and easy way, not best practice but it gets the work done. The best-practice here is to use forwardRef and - super advanced - useImperativeHandle . Take your time and go through the documentation when you're ready.

Answer 3

Login page will show "it is not active" first because active is set to false.but once you click on submit button it will show "it is active"

HomePage

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

Login

const Login = (props) => {

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

    );

}

Navbar

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

        </form>
    </div>

    );

}