Obtuve una barra de navegación que tiene un botón para cambiar el valor de visualización de un formulario de inicio de sesión. El formulario de inicio de sesión y el formulario de inicio de sesión son un archivo diferente, la barra de navegación es un archivo diferente y la página de inicio donde debería mostrarse es un archivo diferente. Esas son las variantes mínimas de cada uno para que puedas entender mi problema en detalle:
Página principal:
const HomePage = () => { return ( <div> <Navbar /> <Login /> <div id="content"> </div> </div> ); }Barra de navegación:
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> ); }Formulario de inicio de sesión:
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> ); }¿Hay alguna manera de lograr esto, o mi opción más fácil sería incluir el código fuente de inicio de sesión en el código fuente de la barra de navegación?
No necesita mover su componente de inicio de sesión dentro de la barra de navegación. Mantenlo como está. Puede usar useState y Props para cambiar las clases de css para mostrar/ocultar su componente de inicio de sesión . He creado una solución muy simple para usted en este CodeSandbox .
Pasos:
hidden y blockhidden para block si es verdadero.onClick en el componente de inicio de sesión.useState dentro de su página de inicio que contenga un valor booleano. Ese valor booleano, páselo a la propiedad de la página de inicio de sesión y luego use la propiedad onClick de la barra de navegación para cambiar ese estado booleanoSí, dependiendo de su sistema CSS, esto se puede lograr fácilmente con solo usarlo.
La solución React está usando refs . La manera fácil es crear una ref en el componente principal y luego pasarla como apoyo a ambos componentes:
En la página de inicio (es decir, padre), cree una referencia como tal loginRef = useRef(); luego pásalo como apoyo a los 2 niños.
En Login-Form.js asigna ese accesorio en el div con id Iniciar sesión así <div id='Login' ref={props.loginRef}>
Luego, en Navbar.js , puede usar ese accesorio para cambiar su valor de visualización, así const showLogin = () => {props.loginRef.current.style.display='block';}
NB: Esta es una manera rápida y fácil, no es la mejor práctica, pero hace el trabajo. La mejor práctica aquí es usar forwardRef y, muy avanzado, useImperativeHandle . Tómese su tiempo y revise la documentación cuando esté listo.
La página de inicio de sesión mostrará "no está activo" primero porque activo está configurado como falso. Pero una vez que haga clic en el botón Enviar, mostrará "está activo"
Página principal
const HomePage = () => { const[active,setActive]=useState(false); return ( <div> <Navbar activesetter={setActive} /> <Login activestatus={active} /> <div id="content"> </div> </div> ); }Acceso
const Login = (props) => { return( <div> <div> {props.activestatus ? "it is active" : "it is not active" } </div> </div> ); }barra de navegación
const Navbar = (props) => { const handleSubmit=(e)=> { e.preventDefault(); props.activesetter(true); } return( <div> <form onSubmit={handleSubmit}> <button type="submit">Login</button> </form> </div> ); }