Codifico con next.js un inicio de sesión:
import type { NextPage } from 'next' import Head from 'next/head' import styles from '../styles/Home.module.css' import Router from 'next/router' import * as React from 'react' const Home: NextPage = () => { const [disable, setDisable] = React.useState(false); const loginUser = async (e: any) => { try { setDisable(true) const y = (window.document.getElementById('inputUsername')) let inputValue = window.document.getElementById('inputUsername').value console.log(inputValue) const resp = await fetch('/api/token/valid') const data = await resp.json() if (data.token) { //Router.push('/dashboard') setDisable(false) } } catch (err) { // Handle Error Here console.error(err); } }; return ( <div className={styles.container}> <Head> <title>Login - Uhrenlounge CMS</title> <meta name="description" content="Generated by create next app" /> </Head> <main className={styles.main}> <form className="p-3 mb-2 bg-secondary text-white"> <div className="text-center"> <h1>Uhrenlounge CMS</h1> </div> <hr /> <div className="mb-3"> <label className="form-label">Benutzername</label> <input type="text" className="form-control" id="inputUsername" name="inputUsername" placeholder="Benutzername" required /> </div> <div className="mb-3"> <label className="form-label">Passwort</label> <input type="password" className="form-control" id="inputPassword" placeholder="Passwort" /> </div> <div className="d-grid gap-2"> <button type="button" disabled={disable} onClick={loginUser} className="btn btn-primary" id="btnLoginUser">Login</button> </div> </form> </main> </div> ) } export default HomeQuiero obtener el valor de las entradas después de hacer clic en el botón. Intento obtener el valor con este código:
let inputValue = window.document.getElementById('inputUsername').valueVSCode me da este error: el objeto es posiblemente 'nulo'.
no se que puedo hacer ¿Alguien tiene alguna idea o explicación de cómo acceder al valor después de hacer clic?
Solo le dice que si no hay ningún elemento con id 'inputUsername', getElementById devolverá un valor nulo en lugar del valor que espera.
Puede manejar o ignorar ese caso como mejor le parezca.
Sin embargo, si realmente necesita acceder a los nodos dom en reaccionar, la forma correcta de hacerlo es ganchos https://reactjs.org/docs/hooks-intro.html . En este momento, es posible que su componente no funcione si existen dos al mismo tiempo debido a las identificaciones superpuestas.