Sélectionner une page


Presque chaque application doit accepter l’entrée de l’utilisateur à un moment donné, et cela est généralement accompli en utilisant le vénérable formulaire HTML et sa collection de contrôles d’entrée. Si vous avez récemment commencé à apprendre React, vous êtes probablement arrivé au point où vous pensez: « Comment travailler avec les formulaires? »

Cet article vous explique les bases de l’utilisation des formulaires dans React pour permettre aux utilisateurs d’ajouter ou de modifier des informations. Nous allons examiner deux façons différentes de travailler avec les contrôles d’entrée et leurs avantages et inconvénients. Nous verrons également comment gérer la validation et certaines bibliothèques tierces pour des cas d’utilisation plus avancés.

Entrées incontrôlées

La manière la plus simple de travailler avec des formulaires dans React est d’utiliser ce que l’on appelle une entrée de formulaire «incontrôlée». Cela signifie que React ne suit pas l’état de l’entrée. Les éléments d’entrée HTML, bien sûr, ont leur propre statut dans le cadre du DOM. Lorsque le formulaire est soumis, nous devons lire nous-mêmes les valeurs des éléments DOM.

Pour ce faire, nous pouvons utiliser React pour créer une référence (référence) qui peut être associée à un élément pour accéder au nœud DOM sous-jacent. Voyons comment cela fonctionne:

class SimpleForm extends React.Component {
  constructor(props) {
    super(props);
    
    this.nameEl = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    alert(this.nameEl.current.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>Name:
          <input type="text" ref={this.nameEl} />
        </label>
        <input type="submit" name="Submit" />
      </form>
    )
  }
}

Comme vous pouvez le voir ci-dessus, pour un composant basé sur une classe, vous initialisez une nouvelle référence dans le constructeur en l’appelant React.createRefAffectez-la à une propriété d’occurrence afin qu’elle soit disponible pendant toute la durée de vie du composant.

Afin d’affecter la référence à une entrée, elle est passée à l’élément en tant que ref Attribut. Une fois cela fait, le nœud DOM sous-jacent de l’entrée est accessible this.nameEl.current.

Voyons à quoi cela ressemble dans un composant fonctionnel:

function SimpleForm(props) {
  const nameEl = React.useRef(null);

  const handleSubmit = e => {
    e.preventDefault();
    alert(nameEl.current.value);
  };

  return (
     <form onSubmit={handleSubmit}>
       <label>Name:
         <input type="text" ref={nameEl} />
       </label>
       <input type="submit" name="Submit" />
     </form>
   );
}

Il n’y a pas beaucoup de différence ici à part l’échange createRef pour le useRef Accrocher.

Exemple: formulaire d’inscription

function LoginForm(props) {
  const nameEl = React.useRef(null);
  const passwordEl = React.useRef(null);
  const rememberMeEl = React.useRef(null);

  const handleSubmit = e => {
    e.preventDefault();

    const data = {
      username: nameEl.current.value,
      password: passwordEl.current.value,
      rememberMe: rememberMeEl.current.checked,
    }

    
    
  };

  return (
     <form onSubmit={handleSubmit}>
       <input type="text" placeholder="username" ref={nameEl} />
       <input type="password" placeholder="password" ref={passwordEl} />
       <label>
         <input type="checkbox" ref={rememberMeEl} />
         Remember me
       </label>
       <button type="submit" className="myButton">Login</button>
     </form>
   );
}

Vue CodePen

Bien que la saisie incontrôlée fonctionne bien pour les formulaires rapides et faciles, elle présente certains inconvénients. Comme vous l’avez peut-être remarqué dans le code ci-dessus, nous devons lire la valeur de l’élément d’entrée chaque fois que nous le voulons. Cela signifie que nous ne pouvons pas fournir une validation instantanée pour le champ pendant les types d’utilisateurs, ni faire des choses comme forcer un format d’entrée personnalisé, afficher ou masquer sous condition des éléments de formulaire ou désactiver / activer le bouton d’envoi.

Heureusement, il existe un moyen plus sophistiqué de gérer les entrées dans React.

Entrées contrôlées

Une entrée est dite « contrôlée » lorsque React est chargé de maintenir et d’ajuster son état. L’état est synchronisé avec la valeur de l’entrée, ce qui signifie que la modification de l’entrée met à jour l’état et la mise à jour de l’état modifie l’entrée.

Voyons à quoi cela ressemble en utilisant un exemple:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };
    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(event) {
    this.setState({
      name: event.target.value
    });
  }

  render() {
    return (
      <input type="text" value={this.state.name} onChange={this.handleInput} />
    );
  }
}

Comme vous pouvez le voir, nous avons mis en place une sorte de flux de données circulaire: état à valeur d’entrée, événement pour changer d’état et inversement. Cette boucle nous donne beaucoup de contrôle sur l’entrée, car nous pouvons réagir aux changements de valeur à la volée. Pour cette raison, les entrées contrôlées ne souffrent pas des restrictions des entrées non contrôlées, ce qui ouvre les possibilités suivantes:

  • validation d’entrée immédiate: Nous pouvons donner un retour instantané à l’utilisateur sans avoir à attendre l’envoi du formulaire (par exemple si son mot de passe n’est pas assez complexe).
  • Formatage d’entrée instantané: Nous pouvons ajouter des séparateurs appropriés aux entrées de devises ou regrouper les numéros de téléphone à la volée
  • Désactiver la soumission de formulaire sous certaines conditions: Nous pouvons activer le bouton d’envoi une fois que certains critères sont remplis (par exemple si l’utilisateur a accepté les conditions d’utilisation).
  • générer de nouvelles entrées dynamiquement: Nous pouvons ajouter une entrée supplémentaire à un formulaire en fonction des entrées précédentes de l’utilisateur (par exemple, en ajoutant des détails sur des personnes supplémentaires lors de la réservation d’un hôtel).

Validation

Comme mentionné ci-dessus, la boucle de mise à jour continue des composants contrôlés permet une validation continue des entrées lors des types d’utilisateurs. Un gestionnaire attaché à une entrée onChange L’événement est déclenché chaque fois qu’une touche est enfoncée, vous pouvez donc valider ou formater la valeur immédiatement.

Exemple: validation de la carte de crédit

Examinons un exemple concret de vérification d’un numéro de carte de crédit lorsque l’utilisateur le saisit dans un formulaire de paiement.

L’exemple utilise une bibliothèque nommée Type de carte de crédit pour déterminer l’émetteur de la carte (comme Amex, Visa ou Mastercard) comme type d’utilisateur. Le composant utilise ensuite ces informations pour afficher une image du logo de l’émetteur à côté de l’entrée:

import  creditCardType  from  "credit-card-type";

function CreditCardForm(props) {
  const [cardNumber, setCardNumber] = React.useState("");
  const [cardTypeImage, setCardTypeImage] = React.useState(
    "card-logo-unknown.svg"
  );

  const handleCardNumber = (e) => {
    e.preventDefault();

    const value = e.target.value;
    setCardNumber(value);

    let suggestion;

    if (value.length > 0) {
      suggestion = creditCardType(e.target.value)[0];
    }

    const cardType = suggestion ? suggestion.type : "unknown";

    let imageUrl;

    switch (cardType) {
      case "visa":
        imageUrl = "card-logo-visa.svg";
        break;
      case "mastercard":
        imageUrl = "card-logo-mastercard.svg";
        break;
      case "american-express":
        imageUrl = "card-logo-amex.svg";
        break;
      default:
        imageUrl = "card-logo-unknown.svg";
    }

    setCardTypeImage(imageUrl);
  };

  return (
    <form>
      <div className="card-number">
        <input
          type="text"
          placeholder="card number"
          value={cardNumber}
          onChange={handleCardNumber}
        />
        <img src={cardTypeImage} alt="card logo" />
      </div>
      <button type="submit" className="myButton">
        Login
      </button>
    </form>
  );
}

L’entrée est onChange Le gestionnaire appelle le creditCardType() Fonction avec la valeur actuelle. Cela renvoie un tableau de correspondances (ou un tableau vide) qui peut être utilisé pour déterminer quelle image afficher. L’URL de l’image est ensuite définie sur une variable d’état à restituer sur le formulaire.

Vous pouvez utiliser certains des nombres de Ici pour tester l’entrée.

Bibliothèques de formulaires

Comme vous l’avez peut-être remarqué, il existe une bonne quantité de code pour la plaque chauffante lorsque vous travaillez avec des formulaires, en particulier lorsque les entrées doivent être connectées à leurs valeurs d’état et à leurs gestionnaires. Comme vous vous en doutez, il existe une variété de bibliothèques tierces pour faciliter le traitement de formulaires plus volumineux et plus complexes.

Pour vous donner une idée de ce à quoi ressemble une bibliothèque de formulaires, jetons un coup d’œil à celle qui s’appelle Frais. L’objectif de cette bibliothèque est de couvrir 90% de vos cas d’utilisation courants avec une API simple et facile à utiliser. Voici un exemple de formulaire de modification de profil que vous pourriez trouver dans une application Web:

import { Form, Field } from "@leveluptuts/fresh";

const securityQuestions = [
  "What is your mother's maiden name?",
  "What was the name of your first pet?",
  "What was the name of your first school?"
];

const handleSubmit = (data) => console.log(data);

function UserProfileForm() {
  return (
    <Form formId="user-profile" onSubmit={handleSubmit}>
      <Field required>First Name</Field>
      <Field required>Last Name</Field>
      <Field required type="email">
        Email
      </Field>

      <Field required type="select" options={securityQuestions}>
        Security Question
      </Field>
      <Field required>Security Answer</Field>

      <Field type="textarea">Bio</Field>
    </Form>
  );
}

Fresh propose des composants personnalisés pour faciliter la création de formulaires. le Field Le composant prend en charge la liaison de données pour les entrées de formulaire en cours de câblage et convertit l’étiquette que vous avez fournie en un nom de propriété de cas de chameau pour la valeur de l’entrée. (Par exemple, « Nom de famille » lastName dans l’état du formulaire.)

le Form Le composant englobe tous les champs et en prend un onSubmit Rappel qui reçoit les données du formulaire en tant qu’objet. Voici un exemple de la sortie du formulaire:

{
  firstName: "Bill",
  lastName: "Gates",
  email: "billg@microsoft.com",
  securityQuestion: "What was the name of your first pet?",
  securityAnswer: "Fluffy",
  bio: "Bill Gates is a technologist, business leader, and philanthropist. He grew up in Seattle, Washington, with an amazing and supportive family who encouraged his interest in computers at an early age."
}

Comme vous pouvez le voir, des bibliothèques comme celle-ci peuvent accélérer le travail avec les formulaires et rendre vos composants moins détaillés. Pour plus qu’une forme simple et petite, je vous recommande d’en choisir une qui correspond à vos besoins car elle vous fera gagner du temps à long terme.

Conclusion

Vous devriez maintenant avoir une solide compréhension de la façon dont les formulaires et les entrées peuvent être utilisés dans React. Vous devez connaître la différence entre les entrées contrôlées et non contrôlées, ainsi que les avantages et les inconvénients de chaque entrée, et être conscient que la boucle de mise à jour serrée des entrées contrôlées vous offre de nombreuses options pour le formatage et la validation des valeurs à la volée. Enfin, vous devez savoir que des bibliothèques de formulaires sont disponibles, ce qui vous évite d’avoir à ajouter beaucoup de code répétitif et détaillé à vos formulaires React afin de devenir un développeur plus productif.



Source link

Recent Posts