0
votes

Comment définir l'état d'une propriété calculée à l'aide de hooks

Lien vers la question d'origine: Comment définir l'état de la propriété calculée à l'aide de crochets

J'essaie essentiellement de mettre à jour un ancien projet pour utiliser des crochets et des composants fonctionnels lorsque cela est possible. J'ai besoin de mettre à jour l'état d'une propriété calculée à l'aide de hooks dans la fonction handleChange. Comment procéder?

J'ai supprimé le code non pertinent dans l'extrait de code suivant:

import React, { useState } from 'react'
import AuthenticationService from '../service/AuthenticationService';

export const LoginComponent1 = () => {
    const [userName, setUserName] = useState('Neil');
    const [password, setPassword] = useState('');
    const [loginStatus, setLoginStatus] = useState(false);

    const handleChange = (event) => {
      this.setState(
        {
          [event.target.name]: event.target.value
        }
      );
    }

    const loginClicked = () => {
       ...
    }


    const enterPressed = (event) => {
        ...
    }

    return (
        <div className="container">
            <h1>Login</h1>
            <div className="container">

                User Name: <input className= "userNameBox" type="text" placeholder="Neil" name="username" value={userName} onChange={handleChange} onKeyPress={enterPressed}></input>
                Password: <input className= "userNameBox" type="password" id="myInput" name="password" value={password} onChange={handleChange} onKeyPress={enterPressed}></input>
                <hr></hr>
            </div>
        </div>
    )
}
export default LoginComponent1

Merci!

reactjs react-hooks

0 commentaires

3 Réponses :

1
votes

this.setState n'existe que dans les composants de classe, pas dans les composants fonctionnels.

Pour mettre à jour l'état avec les hooks useState , appelez simplement le setter correspondant. Dans votre exemple, appelez setUserName pour mettre à jour le nom d'utilisateur, setPassword pour mettre à jour le mot de passe, etc.

0 commentaires

1
votes

Lors de la déclaration d'un état dans un composant fonctionnel, le deuxième paramètre que vous passez est une méthode utilisée pour définir l'état. this.setState est disponible uniquement dans les composants de classe. Voir ici

Dans votre exemple de définition du mot de passe d'état, vous devez appeler la méthode setPassword avec value.
Par exemple: setPassword ('ceci est mon mot de passe')

0 commentaires

0
votes

si vous voulez créer un gestionnaire générique comme avant vous aviez un composant basé sur react avec plusieurs gestionnaires d'état, vous pouvez créer un gestionnaire d'objet après vos hooks useState et refactoriser votre handleChange comme:

const handler = {
  username: setUserName,
  password: setPassword
}

const handleChange = (event) => handler[event.target.name](event.target.value)

0 commentaires