2
votes

Quelles sont les meilleures pratiques pour travailler avec des formulaires dans ReactJS?

Dans VanilaJs, nous prenons les données du formulaire pendant onSubmit, en utilisant FormData make request. Dans la documentation de ReactJ, nous voyons qu'avant de soumettre, il est recommandé de définir les données de l'État qui ont introduit l'utilisateur. bouton soumettre nous prenons ces données de l'état et faisons la demande. Alors, est-ce le meilleur moyen de travailler avec des formulaires en utilisant React?

javascript reactjs forms

2 commentaires

Bref oui. Collectez les données généralement onChange dans l'état du composant, puis onSubmit preventDefault () + envoyez les données en tant que POST à votre api.

reactjs.org/docs/forms.html#fully-fledged-solutions

3 Réponses :

1
votes

En fonction de la taille de votre projet, il existe de nombreux packages qui facilitent la soumission de formulaires, par exemple: formik , redux-form , react -final-form , pour n'en nommer que quelques-uns. Mais la plupart d'entre eux utilisent la même technique. Par exemple, formik fait exactement cela et gère également certains cas extrêmes pour vous afin que vous n'ayez pas à vous en soucier.

En bref, je dirais que oui, c'est la meilleure façon, ou du moins la manière de réagir, de gérer les données de formulaire.

0 commentaires

2
votes

Il existe de multiples façons de former la forme dans react, et beaucoup n'impliquent pas l ' état .

De nombreuses personnes utilisent redux pour stocker les états de leurs applications.

Vous pouvez bien sûr utiliser l ' état de votre composant, mais vous pouvez également utiliser redux -form (populaire) ou formik (léger).

Le stockage dans l ' état est aussi simple que le stockage dans un objet , mais il peut alors devenir compliqué de tout stocker au même endroit dans votre DOM React.

C'est pourquoi le redux existe et pourquoi vous devriez lire ce que c'est, cela vous aidera à obtenir la réponse.

0 commentaires

2
votes

Vous pouvez également faire la même chose que votre ancienne approche ici, mais le problème est que vous retardez la soumission du formulaire car les collections HTML prennent plus de temps à itérer que la recherche et la gestion des états. Regardez l'exemple:

import React from 'react';

class Login extends React.Component {
  login(event) {
    event.preventDefault();

    const data = {};
    const inputs = event.getElementsByTagName('input');

    for (let input of inputs) data[input.id] = input.value;

    // send `data` to server to test for login

    console.log(data);
  }

  render() {
    return (
      <form onSubmit={this.login}>
        <input id="email" type="email" />
        <input id="password" type="password" />
        <button type="submit">Login</button>
      </form>
    );
  }
}

Imaginez simplement le temps nécessaire pour récupérer du DOM, puis itérer chaque élément, par rapport à la gestion de l'état à chaque pression de touche lors de la soumission du formulaire.

0 commentaires