0
votes

Impossible de lire la propriété 'value' de null dans ReactJS

J'ai essayé de console.log ces 2 entrées, mais je n'arrive pas à comprendre, est-ce que quelqu'un peut me dire ce que j'ai fait de mal? J'obtiens toujours l'erreur Impossible de lire la propriété "valeur" de null erreur

function printInputs() {
  let username = document.getElementById('user').value
  let password = document.getElementById('pass').value

  console.log(username);
  console.log(password);

}

function App() {

  return (
    <div className="App">
      <h1>Log In</h1>
      <h1>{code}</h1>
      <form>
        <input className='userInput' id='user' type='text' placeholder='username' /><br />
        <input className='userInput' id='pass' type='password' placeholder='password' /><br />
        <input className='userSubmit' type='submit' value='Log In' onSubmit={printInputs()} />
      </form>
    </div>
  );
}

javascript reactjs

3 commentaires

Vous ne pouvez pas utiliser document.getElementById dans ReactJS stackoverflow.com/questions/38093760/...

Est-ce que cela répond à votre question? Comment faire accéder à un élément DOM dans React? Quel est l'équilvalent de document.getElementById () dans React

Vous devez utiliser createRef

3 Réponses :

3
votes

onSubmit={printInputs}
Vous essayez d'appeler printInputs immédiatement (avant que la fonction render n'ait renvoyé quoi que ce soit avant que les entrées ne soient dans la page).
/ p>
Vous devez passer une fonction à onSubmit:
onSubmit={printInputs()}
Cela dit, c'est pas l'approche à adopter pour obtenir des données à partir de formulaires dans React. Voir la section Formulaires du guide React pour la bonne approche.
blockquote >

0 commentaires

2
votes

La façon d'écrire des formulaires dans react. Exemple de travail démo

function App() {
  const [state, setState] = React.useState({ username: "", password: "" });
  const handleSubmit = e => {
    e.preventDefault();
    console.log(state);
  };
  const handleChange = e => {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };
  return (
    <div className="App">
      <h1>Log In</h1>
      <form onSubmit={handleSubmit}>
        <input
          className="userInput"
          name="username"
          type="text"
          placeholder="username"
          onChange={handleChange}
        />
        <br />
        <input
          className="userInput"
          name="password"
          type="password"
          placeholder="password"
          onChange={handleChange}
        />
        <br />
        <input className="userSubmit" type="submit" value="Log In" />
      </form>
    </div>
  );
}

0 commentaires

0
votes

dans le premier, n'utilisez jamais de real dom pour manipuler le dom dans Réagissez, utilisez un état pour obtenir de la valeur et le onSumbit est utilisé dans la balise Form

import React, { useState } from "React";
const App = () => {
    const [userName, setUserName] = useState("");
    const [password, setPassword] = useState("");
    const printInputs = () => {
        console.log(userName);
        console.log(password);
    };
    return (
        <div className="App">
            <h1>Log In</h1>

            <form onSubmit={printInputs}>
                <input
                    className="userInput"
                    id="user"
                    type="text"
                    placeholder="username"
                    onChange={event => setUserName(event.target.value)}
                />
                <br />
                <input
                    className="userInput"
                    id="pass"
                    type="password"
                    placeholder="password"
                    onChange={event => setPassword(event.target.value)}
                />
                <br />
                <input
                    className="userSubmit"
                    type="submit"


            value="Log In"/>
                </form>
            </div>
        );
    };
    export default App;

0 commentaires