Formulaires de réaction
Tout comme en HTML, React utilise des formulaires pour permettre aux utilisateurs d'interagir avec la page Web.
Ajouter des formulaires dans React
Vous ajoutez un formulaire avec React comme n'importe quel autre élément :
Exemple:
Ajoutez un formulaire permettant aux utilisateurs de saisir leur nom :
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Cela fonctionnera normalement, le formulaire sera soumis et la page sera actualisée.
Mais ce n'est généralement pas ce que nous voulons qu'il se passe dans React.
Nous voulons empêcher ce comportement par défaut et laisser React contrôler le formulaire.
Gestion des formulaires
La gestion des formulaires concerne la façon dont vous gérez les données lorsqu'elles changent de valeur ou sont soumises.
En HTML, les données de formulaire sont généralement gérées par le DOM.
Dans React, les données de formulaire sont généralement gérées par les composants.
Lorsque les données sont gérées par les composants, toutes les données sont stockées dans l'état du composant.
Vous pouvez contrôler les modifications en ajoutant des gestionnaires d'événements dans l'
onChangeattribut.
Nous pouvons utiliser le useStatecrochet pour garder une trace de chaque valeur d'entrée et fournir une "source unique de vérité" pour l'ensemble de l'application.
Voir la section React Hooks pour plus d'informations sur les Hooks.
Exemple:
Utilisez le onChangecrochet pour gérer l'entrée :
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Obtenir une certification!
95 $ S'INSCRIRE
Envoi de formulaires
Vous pouvez contrôler l'action submit en ajoutant un gestionnaire d'événement dans l' onSubmitattribut pour <form>:
Exemple:
Ajoutez un bouton d'envoi et un gestionnaire d'événements dans l' onSubmitattribut :
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Champs de saisie multiples
Vous pouvez contrôler les valeurs de plusieurs champs de saisie en ajoutant un
nameattribut à chaque élément.
Nous allons initialiser notre état avec un objet vide.
Pour accéder aux champs du gestionnaire d'événements, utilisez la
syntaxe event.target.nameet
.event.target.value
Pour mettre à jour l'état, utilisez des crochets [notation entre crochets] autour du nom de la propriété.
Exemple:
Rédigez un formulaire avec deux champs de saisie :
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Remarque : nous utilisons la même fonction de gestionnaire d'événements pour les deux champs de saisie, nous pourrions écrire un gestionnaire d'événements pour chacun, mais cela nous donne un code beaucoup plus propre et c'est la méthode préférée dans React.
Zone de texte
L'élément textarea dans React est légèrement différent du HTML ordinaire.
En HTML, la valeur d'un textarea était le texte entre la balise de début
<textarea>
et la balise de fin </textarea>.
<textarea>
Content of the textarea.
</textarea>Dans React, la valeur d'une zone de texte est placée dans un attribut de valeur. Nous utiliserons le useStateHook pour gérer la valeur de textarea :
Exemple:
Une zone de texte simple avec du contenu :
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Sélectionner
Une liste déroulante, ou une zone de sélection, dans React est également un peu différente du HTML.
en HTML, la valeur sélectionnée dans la liste déroulante a été définie avec l' selectedattribut :
HTML :
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>Dans React, la valeur sélectionnée est définie avec un value
attribut sur la selectbalise :
Exemple:
Une simple boîte de sélection, où la valeur sélectionnée "Volvo" est initialisée dans le constructeur :
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
En apportant ces légères modifications à <textarea>et <select>, React est capable de gérer tous les éléments d'entrée de la même manière.