ReactJS - Composant Non Contrôlé

Bonjour, aspirants programmeurs ! Aujourd'hui, nous allons plonger dans le monde de ReactJS et explorer un concept appelé "Composant Non Contrôlé". Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je vais vous guider pas à pas, comme j'ai fait pour des centaines d'étudiants au fil des ans. Alors, prenez une tasse de votre boisson favorite, et mettons-nous ensemble sur cette aventure passionnante !

Qu'est-ce que les Composants Non Contrôlés ?

Avant de rentrer dans les détails, comprenons ce que sont les composants non contrôlés dans React. Imaginez que vous remplissez un formulaire papier - vous écrivez vos informations, et lorsque vous avez terminé, vous le soumettez. C'est essentiellement ainsi que les composants non contrôlés fonctionnent dans React !

Dans React, un composant non contrôlé est un élément de formulaire qui gère son propre état internement, plutôt que d'avoir React le contrôler. C'est comme donner à l'élément de formulaire une tête pensante !

Programmation de Formulaire dans les Composants Non Contrôlés

Maintenant, mettons les mains dans le cambouis avec un peu de code. Nous allons commencer par un exemple simple pour illustrer comment les composants non contrôlés fonctionnent dans la programmation de formulaire.

Entrée Non Contrôlée de Base

Voici un exemple de base d'une entrée non contrôlée :

import React from 'react';

function SimpleForm() {
return (
<form>
<label htmlFor="name">Nom:</label>
<input type="text" id="name" name="name" />
</form>
);
}

export default SimpleForm;

Dans cet exemple, nous avons un formulaire simple avec une entrée de texte pour un nom. Notez que nous n'avons pas d'état ou de gestionnaires onChange ? C'est parce que l'entrée gère son propre état internement.

Accès aux Valeurs d'Entrée

Mais attendez, vous pourriez demander, "Comment obtenons-nous la valeur de l'entrée si React ne le gère pas ?" Excellent pregunta ! Nous pouvons utiliser un ref pour accéder directement au nœud DOM. Modifions notre exemple :

import React, { useRef } from 'react';

function SimpleForm() {
const inputRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
alert('Un nom a été soumis : ' + inputRef.current.value);
};

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

export default SimpleForm;

Dans cette version mise à jour, nous utilisons le hook useRef pour créer une référence à notre entrée. Lorsque le formulaire est soumis, nous pouvons accéder à la valeur de l'entrée en utilisant inputRef.current.value.

Création d'un Formulaire Simple

Maintenant que nous comprenons les bases, créons un formulaire plus complet en utilisant des composants non contrôlés.

Formulaire à Multi-Entrées

import React, { useRef } from 'react';

function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('Données du formulaire:', formData);
// Ici, vous enverriez généralement les données vers un serveur
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Nom:</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">Email:</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">Message:</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">Envoyer le message</button>
</form>
);
}

export default ComplexForm;

Dans cet exemple, nous avons créé un formulaire avec trois champs : nom, email et message. Chaque champ a son propre ref, nous permettant d'accéder à sa valeur lorsque le formulaire est soumis.

Explication

1. Nous créons des refs pour chaque entrée en utilisant useRef.
2. Dans la fonction handleSubmit, nous empêchons le comportement par défaut de soumission du formulaire et collectons les valeurs de chaque entrée en utilisant leurs refs.
3. Nous enregistrons ensuite les données du formulaire dans la console (dans une application réelle, vous enverriez généralement ces données vers un serveur).

Avantages et Inconvénients des Composants Non Contrôlés

Reprenons un moment pour discuter des avantages et des inconvénients d'utiliser des composants non contrôlés :

Avantages	Inconvénients
Code plus simple pour les formulaires de base	Moins de contrôle sur les valeurs du formulaire
Peut être utile pour intégrer React avec du code non-React	Plus difficile à implémenter une validation dynamique du formulaire
Performances potentiellement meilleures pour les formulaires très grands	Impossible de réinitialiser les valeurs du formulaire de manière programmatique
Fonctionne bien avec les entrées de fichiers	Moins "React-like" - ne suit pas le principe de la vérité unique

Quand Utiliser les Composants Non Contrôlés

Les composants non contrôlés peuvent être utiles dans certains scénarios :

1. Lorsque vous intégrez avec du code non-React ou des bibliothèques
2. Pour des formulaires simples où vous n'avez pas besoin de validation en temps réel ou de mises à jour dynamiques
3. Lorsque vous travaillez avec des entrées de fichiers (qui sont intrinsèquement non contrôlées)

Cependant, pour la plupart des applications React, les composants contrôlés (où React gère l'état du formulaire) sont généralement préférés car ils offrent plus de contrôle et s'alignent mieux avec la philosophie de React.

Conclusion

Et voilà, les amis ! Nous avons parcouru le pays des composants non contrôlés dans React. Souvenez-vous, comme choisir entre une voiture manuelle et une automatique, le choix entre des composants contrôlés et non contrôlés dépend de vos besoins spécifiques.

En conclusion, je suis rappelé d'un étudiant qui m'a dit un jour, "React, c'est comme cuisiner - parfois vous avez besoin de mesures précises, et d'autres fois vous pouvez juste l'approximer." Les composants non contrôlés sont un peu comme l'approximation - ils ont leur place, mais utilisez-les avec sagesse !

J'espère que ce guide a éclairé le chemin des composants non contrôlés pour vous. Continuez à pratiquer, continuez à coder, et souvenez-vous - dans le monde de la programmation, chaque erreur est une étape vers le succès !

Bonne programmation, futurs maîtres de React !

Credits: Image by storyset