Travailler avec des formulaires dans React

Gestion de la saisie des utilisateurs est fondamentale pour presque toutes les applications, et dans le monde du développement Web, les formulaires HTML sont l'outil standard pour cette tâche. Si vous êtes nouveau à réagir, l'intégration des formulaires peut sembler intimidante. Cet article fournit un guide clair et concis pour travailler avec des formulaires dans React, couvrant les techniques de base et avancées.

Concepts clés

• Entrées incontrôlées: Ce sont l'approche la plus simple. React ne suit pas l'état de l'entrée; Au lieu de cela, vous accédez directement aux valeurs à partir des éléments DOM pendant la soumission. Cela convient aux formes très simples.
• Entrées contrôlées: React gère l'état de l'entrée. Cela offre un contrôle supérieur, permettant une validation en temps réel, une mise en forme, un rendu conditionnel et une génération d'entrée dynamique. Ceci est l'approche recommandée pour la plupart des scénarios.
• Validation en temps réel: Les composants contrôlés permettent une rétroaction instantanée sur la validité d'entrée à mesure que l'utilisateur type, améliorant l'expérience utilisateur.
• Bibliothèques tierces: Les bibliothèques comme la gestion de la forme de simplification fraîche, en particulier pour les formulaires complexes, réduisant le code de la bail.

Entrées incontrôlées: une approche de base

Les entrées non contrôlées exploitent les références pour accéder au nœud DOM sous-jacent. Voici à quoi il ressemble dans un composant fonctionnel:

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

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

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

pour les composants de classe, React.createRef() est utilisé dans le constructeur. Bien que des entrées simples et incontrôlées manquent des caractéristiques de leurs homologues contrôlés.

Exemple: formulaire de connexion (incontrôlé)

function LoginForm() {
  // ... (refs for username, password, rememberMe) ...

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      username: nameEl.current.value,
      password: passwordEl.current.value,
      rememberMe: rememberMeEl.current.checked,
    };
    // ... (submit data) ...
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* ... (input fields) ... */}
    </form>
  );
}

Les limites des entrées incontrôlées deviennent apparentes lors de la nécessité d'une validation en temps réel ou d'un comportement de forme dynamique.

Entrées contrôlées: contrôle amélioré

Les entrées contrôlées maintiennent l'état dans le composant React. Les modifications de la mise à jour de l'entrée à la mise à jour de l'état et les modifications de l'état mettent à jour l'entrée.

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

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

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

Ce flux de données circulaires fournit la puissance à implémenter:

• Validation en temps réel: Fournir une rétroaction immédiate sur l'exactitude des entrées.
• Formatage des entrées: Appliquer le formatage (par exemple, devise, numéros de téléphone) dynamiquement.
• Rendu conditionnel: Afficher / masquer les éléments basés sur les valeurs d'entrée.
• Génération des entrées dynamiques: Ajouter des entrées en fonction des interactions utilisateur.

Validation: rétroaction en temps réel

Les entrées contrôlées permettent une validation continue. Voici un exemple simplifié de validation des cartes de crédit (en utilisant une fonction hypothétique validateCreditCard):

function CreditCardForm() {
  // ... (state for card number and error message) ...

  const handleCardNumber = (e) => {
    const value = e.target.value;
    const isValid = validateCreditCard(value); // Hypothetical validation function
    this.setState({ cardNumber: value, cardError: !isValid });
  };

  return (
    <form>
      <input
        type="text"
        value={this.state.cardNumber}
        onChange={this.handleCardNumber}
      />
      {this.state.cardError && <span>Invalid credit card number</span>}
    </form>
  );
}

Bibliothèques de formulaires: rationalisation du développement

Les bibliothèques comme les nouvelles réduisent considérablement le chauffeur. Voici un exemple simple:

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

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

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

Ces bibliothèques gèrent la gestion, la validation et la soumission de l'État, ce qui rend le développement plus efficace.

Conclusion

Comprendre les entrées contrôlées et incontrôlées est cruciale pour une manipulation de forme efficace dans React. Alors que les entrées non contrôlées conviennent aux scénarios simples, les entrées contrôlées offrent la flexibilité et la puissance nécessaires à la plupart des applications. Envisagez d'utiliser des bibliothèques de formulaires pour rationaliser le développement pour des formes complexes. N'oubliez pas de hiérarchiser l'expérience utilisateur grâce à des commentaires clairs et à la gestion des erreurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!