1
votes

Comment ajouter des gestionnaires d'événements dans const dans React?

Je suis nouveau dans React et je réalise un projet React avec le modèle PRIMER React. Dans la page de connexion, le code comme suit.

const Signin = (props) => {
      const { classes } = props;

      this.handleSubmit = this.handleSubmit.bind(this);

        handleSubmit(event) {
          event.preventDefault();
          const data = new FormData(event.target);

          this.setState({
            res: data
          });
        console.log(this.state.res)
      }

      return (
                  <form onSubmit={this.handleSubmit}>
                    <TextField
                      id="username"
                      label="Username"
                      className={classes.textField}
                      fullWidth
                      margin="normal"
                    />
                    <TextField
                      id="password"
                      label="Password"
                      className={classes.textField}
                      type="password"
                      fullWidth
                      margin="normal"
                    />
                    <Button variant="raised" color="primary" fullWidth type="submit">Login</Button>
                  </form>
      );
    }

Je dois ajouter le formulaire Soumettre le gestionnaire d'événements. J'ai donc ajouté ce code comme suit.

const Signin = (props) => {
  const { classes } = props;
  return (
              <form>
                <TextField
                  id="username"
                  label="Username"
                  className={classes.textField}
                  fullWidth
                  margin="normal"
                />
                <TextField
                  id="password"
                  label="Password"
                  className={classes.textField}
                  type="password"
                  fullWidth
                  margin="normal"
                />
                <Button variant="raised" color="primary" fullWidth type="submit">Login</Button>
              </form>
  );
}

Mais cela ne fonctionne pas. Je ne peux même pas compiler ça. Quel est le problème ici et comment puis-je gérer les gestionnaires d'événements?

reactjs

4 commentaires

Vous n'avez pas besoin de cette ligne this.handleSubmit = this.handleSubmit.bind (this); et devez remplacer

par < code> et faites de handleSubmit comme fonction de flèche.

Vous ne pouvez pas utiliser this pour les composants fonctionnels sans état. Vous devrez le transformer en une classe de composants à part entière.

Pourquoi utilisez-vous un composant sans état alors que vous devez utiliser son état? ..

@Arfeo, je ne le fais pas. Mais je ne sais pas comment utiliser le gestionnaire d'événements dans les composants sans état

3 Réponses :

1
votes

Je pense que l'erreur vient du fait que vous mélangez une syntaxe de fonction / classe normale avec une syntaxe de flèches.

Rappelez-vous que les flèches n'ont pas de contexte "ceci" ou appelant, vous devrez donc apporter les modifications mentionnées par Panther. Cordialement.

voir https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions pour plus de détails

En fait, je vois que vous utilisez l'état dans le composant .

Vous devrez le convertir en classe ou utiliser à la place un hook

const [formRes, setformRes] = React.UseState();

handleSubmit(event) {
   event.preventDefault();
   const data = new FormData(event.target);

   setformRes(data)
   console.log(formRes)
}

0 commentaires

1
votes

Votre composant est un composant fonctionnel. Alors faites ce qui suit et exécutez une fois:

supprimer this.handleSubmit = this.handleSubmit.bind (this);
event handleSubmit placez-le comme un const handleSubmit = (e) => {} ou placez-le en dehors du composant et setState - faites-en un composant de classe. Vous avez toujours besoin d'un composant fonctionnel, utilisez des hooks ou utilisez des refs dans des composants sans état.
remplacez par

Soit, vous pouvez utiliser le composant de classe pour ce cas Signin si votre intention est d'utiliser setState. pour convertir une fonction en classe, vérifiez ceci .

et dans le composant fonctionnel, vous pouvez définir ref comme ceci:

const MyComponent = (props) => {
  let cityInput

  const onSubmit = e => {
    e.preventDefault()

    let city = cityInput.value
    if (city) {
      console.log(city)
    }
  }

  return (
    <div>
      <form onSubmit={ onSubmit }>
        <div>
          <input type='text' placeholder='Enter City Name'
            ref={ el => cityInput = el } />
        </div>
        <div>
          <button>Go</button>
        </div>
      </form>
    </div>
  )
}

et dans submit vous pouvez obtenir sa valeur comme:

cityInput.value

Exemple de composant fonctionnel:

 <input type='text' placeholder='Enter City Name'
    ref={ el => cityInput = el } />

Démo

J'espère que cela vous aidera

0 commentaires

1
votes

utiliser le composant de classe.
Transmettez la fonction eventHandler du composant Parent.

composant fonctionnel censé renvoyer du JSX. si vous voulez faire du mess, le composant de classe sera meilleur!

0 commentaires