Obtenir la valeur d'un champ de saisie dans React

1. Comment fonctionnent les entrées dans React
2. Obtenir la valeur du champ de saisie dans React 16
3. Obtenir la valeur du champ d’entrée dans React à l’aide de crochets
4. Comment gérer des formulaires volumineux avec des dizaines d’entrées

La gestion des entrées utilisateur est l’une des clés du développement d’applications React dynamiques. Travailler avec les entrées des utilisateurs vous permet de répondre à leurs actions et de fournir une expérience utilisateur supérieure.

Lorsque vous travaillez dans React, il est bon de stocker les entrées utilisateur dans les propriétés d’état pour établir une source unique de vérité. Cela vous permet d’interagir facilement avec les données et de les manipuler si nécessaire.

Chaque fois que l’état change, React met automatiquement à jour le composant pour refléter les changements les plus récents.

Comment fonctionnent les entrées dans React

Avant d’aller plus loin, nous devons comprendre quand et pourquoi React décide de re-rendre un composant.

Tout d’abord, l’interface utilisateur de l’application est mise à jour (re-rendue) lorsque son état interne change. Tout événement utilisateur, tel que la sélection d’une option différente ou la vérification/décocherie d’un champ, peut modifier l’état et provoquer un nouveau rendu.

Deuxièmement, le nouveau rendu se produit lorsqu’un changement dans les accessoires de composant, qui est reçu du parent. Dans certains cas, le composant parent fournit des valeurs prop à partir de son état.

React utilise JSX, qui ressemble beaucoup à HTML, mais il fonctionne différemment.

Il est important de garder à l’esprit que lorsque vous créez un élément <input> dans JSX, vous ne créez pas l’élément HTML <input>, mais un objet React input qui lui ressemble beaucoup. Il est rendu similaire à l’élément HTML <input> et imite son interface de gestion des événements, mais il est par ailleurs indépendant.

Les applications React sont composées d’éléments d’interface utilisateur, qui obtiennent leurs valeurs à partir de l’état du composant. Comme mentionné précédemment, la modification de l’entrée est l’un des moyens les plus courants de modifier l’état et, par extension, les éléments visuels rendus sur la page.

Cependant, la chose importante à garder à l’esprit est que l’état est la seule source de vérité dans les applications React. L’interface UI a un rôle secondaire.

Obtenir la valeur du champ de saisie dans React 16

Depuis la sortie de React 16, les développeurs peuvent créer des composants de classe React en utilisant une syntaxe de classe lisible. Veuillez noter que vous devez soit les lier dans la fonction constructeur, soit les appeler à l’aide de la syntaxe de la flèche pour que les gestionnaires d’événements fonctionnent, comme dans l’exemple ci-dessous.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      enteredValue: ""
    }
  }
  render() {
    console.log(this.state.enteredValue)
    return <input type="text"
                  onChange={(event) => this.setState({enteredValue: event.target.value})}>
           </input>;
  }
}

En général, il est plus lisible et pratique d’utiliser la syntaxe des flèches. Cela facilite également le débogage des applications.

Vous pouvez vérifier vous-même le playcode et voir que chaque fois que vous (c’est-à-dire l’utilisateur) entrez quelque chose de nouveau dans le champ de saisie, la valeur d’état est mise à jour puis enregistrée sur la console (à des fins de démonstration).

Obtenir la valeur du champ d’entrée dans React à l’aide de crochets

Les composants fonctionnels sont encore plus faciles à écrire et à lire que les composants de classe. Ce type de composant n’est qu’une fonction qui accepte props comme argument.

Jusqu’à il y a quelques années, les composants fonctionnels étaient également appelés composants sans état ou stupides et étaient principalement utilisés pour visualiser les données.

Depuis React 16.8, les composants fonctionnels ont eu accès à de nombreuses nouvelles fonctionnalités, y compris les hooks. Désormais, les développeurs peuvent utiliser le hook useState() pour maintenir un état dans un composant fonctionnel.

Ce hook vous permet d’obtenir une variable d’état et la fonction pour la mettre à jour. Vous n’avez plus besoin d’utiliser l’API .setState() directement dans les composants fonctionnels.

Voici à quoi ressemblerait la même application si elle était construite avec des composants fonctionnels :

function App(props){
  let [inputValue, setInputValue] = useState("")
  console.log(inputValue)
  return <input type="text"
            onChange={(event) => setInputValue(event.target.value)}>
         </input>;
}

Le hook useState() fonctionne de manière très simple. Une fois appelée, elle renvoie une variable d’état affectée à la inputValue et une fonction pour la mettre à jour.

Avoir une fonction distincte pour mettre à jour chaque variable peut être bénéfique du point de vue de la lisibilité. Comme on peut le voir, setInputValue a un nom assez descriptif.

L’argument passé au hook useState() (chaîne vide) sera utilisé comme valeur initiale pour la variable d’état inputValue.

Comme vous pouvez le voir, cette définition est beaucoup plus claire et fonctionne aussi bien qu’un composant de classe. Les composants fonctionnels sont généralement le meilleur choix chaque fois que vous avez besoin d’un composant avec seulement quelques variables pour stocker la valeur d’état.

Pourtant, dans certains cas, les composants de classe sont nécessaires et différents des composants fonctionnels. Pour en savoir plus sur les différences, lisez la documentation officielle de réaction.

Comment gérer des formulaires volumineux avec des dizaines d’entrées

Comme nous l’avons mentionné précédemment, vous avez besoin d’une variable d’état pour chaque élément d’entrée de l’interface utilisateur afin de conserver la valeur saisie par les utilisateurs. Il n’est pas rare que les formulaires aient des dizaines, voire des centaines d’entrées. Devriez-vous créer une variable d’état distincte pour tous ?

La solution est simple et conforme à la logique globale de React. Au lieu d’avoir ces entrées dans un grand composant, vous devriez les diviser en morceaux logiquement connectés en créant de petits composants séparés.

Ensuite, vous pouvez les importer et les utiliser pour créer votre grand formulaire. De cette façon, les composants plus petits ne sont responsables que du stockage et de la maintenance de quelques entrées.

Les applications structurées de cette manière sont plus lisibles et plus faciles à entretenir. Les autres développeurs travaillant sur votre code vous remercieront d’avoir écrit un code simple et compréhensible.