React:State(Formulaire)
Créer un formulaire d'inscription d'un étudiant
Formulaire.js
import React from "react";
class Formulaire extends React.Component{
constructor(props)
{
super(props)
this.state={
//un objet qui permet de stocker les valeurs d'un stagiaire
stagiaire:{
nom:'',
prenom:''
},
//stocker et afficher la liste des stagiaires ajouté
listeStagiaires:[]
}
}
//récupéer la valeur de l'input changé la stocké dans la variable du state stagiaire
//event : un objet qui contient des information sur l'objet DOM changé comme:
//event.target.value,event.target.name,.....
getValue=(event)=>{
this.setState({
stagiaire:{
...this.state.stagiaire,//permet de récupérer les autres attributs de l'objet stagiaire
[event.target.name]:event.target.value
//[event.target.name]:permet de récupéer le nom de l'input qui est change
//qui peut etre soit nom ou prenom
}
})
}
//ajouter un nouveau stagiaire dans la variable du state listeStagiaires
ajouterStagiaire=(event)=>{
//vérifier si tout les champs sont remplis
if(this.state.stagiaire.nom!='' && this.state.stagiaire.prenom!='')
{
//changer la valeur du state afin d'ajouter un nouveau stagiaire
this.setState({
listeStagiaires:[...this.state.listeStagiaires,this.state.stagiaire]
//...this.state.listeStagiaires: récupéer la listes des stagiaire déja ajouter puis ajouté
//un nouveau stagiaire
})
}
}
render(){
return(<div>
<table>
<tr>
<td>Nom</td>
<td><input type="text" name="nom" onChange={this.getValue}/></td>
</tr>
<tr>
<td>Prénom</td>
<td><input type="text" name="prenom" onChange={this.getValue}/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Ajouter" onClick={this.ajouterStagiaire}/></td>
</tr>
</table>
<b>liste stagiaires</b>
<table>
<thead>
<th>Nom</th>
<th>Prénom</th>
</thead>
<tbody>
{
this.state.listeStagiaires.map((str) =>{
return(<tr>
<td>{str.nom}</td>
<td>{str.prenom}</td>
</tr>)
})
}
</tbody>
</table>
</div>)
}
}
export default Formulaire
App.js
import React from 'react';
import './App.css';
import Formualire from './components/formualire/formualire';
class App extends React.Component{
constructor(props)
{
super(props);
}
render()
{
return (
<div>
<Formualire />
</div>
);
}
}
export default App;
Solution 2
Avec Component de type function
import React, { useState } from "react";
function StagiaireCrud() {
// ==============================
// State du stagiaire
// ==============================
const [stagiaire, setStagiaire] = useState({
nom: '',
prenom: '',
age: ''
});
// ==============================
// Liste des stagiaires
// ==============================
const [listeStagiaires, setListeStagiaires] = useState([]);
// ==============================
// Indique si nous sommes
// en mode modification
// ==============================
const [modifierIsOn, setModifierIsOn] = useState(false);
// ==============================
// Index du stagiaire à modifier
// ==============================
const [indexStagiaireAmodifier, setIndexStagiaireAmodifier] = useState(-1);
// =========================================================
// Récupérer la valeur saisie dans les inputs
// =========================================================
const getValue = (event) => {
setStagiaire({
...stagiaire,
[event.target.name]: event.target.value
});
};
// =========================================================
// Ajouter un nouveau stagiaire
// =========================================================
const ajouterStagiaire = () => {
setListeStagiaires([
...listeStagiaires,
stagiaire
]);
// Réinitialiser le formulaire
setStagiaire({
nom: '',
prenom: '',
age: ''
});
};
// =========================================================
// Supprimer un stagiaire
// =========================================================
const supprimerStagiaire = (index1) => {
setListeStagiaires(
listeStagiaires.filter((sta, index) => index !== index1)
);
};
// =========================================================
// Charger un stagiaire dans le formulaire
// pour le modifier
// =========================================================
const modifierStagiaire = (stag, index) => {
setStagiaire({
...stag
});
setModifierIsOn(true);
setIndexStagiaireAmodifier(index);
};
// =========================================================
// Valider la modification
// =========================================================
const validerModifier = () => {
// Créer une nouvelle liste
const listeModifiee = [...listeStagiaires];
// Remplacer l'ancien stagiaire
listeModifiee[indexStagiaireAmodifier] = stagiaire;
// Mettre à jour la liste
setListeStagiaires(listeModifiee);
// Quitter le mode modification
setModifierIsOn(false);
// Réinitialiser l'index
setIndexStagiaireAmodifier(-1);
// Réinitialiser le formulaire
setStagiaire({
nom: '',
prenom: '',
age: ''
});
};
// =========================================================
// JSX
// =========================================================
return (
<div>
{/* =========================
Formulaire
========================= */}
Nom :
<input
type="text"
name="nom"
value={stagiaire.nom}
onChange={getValue}
/>
<br />
Prénom :
<input
type="text"
name="prenom"
value={stagiaire.prenom}
onChange={getValue}
/>
<br />
Age :
<input
type="number"
name="age"
value={stagiaire.age}
onChange={getValue}
/>
<br />
{/* =========================
Bouton Ajouter / Modifier
========================= */}
{
modifierIsOn ? (
<input
type="button"
value="Modifier"
onClick={validerModifier}
/>
) : (
<input
type="button"
value="Ajouter"
onClick={ajouterStagiaire}
/>
)
}
{/* =========================
Tableau
========================= */}
<table>
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Age</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
listeStagiaires.map((sta, index) => {
return (
<tr key={index}>
<td>
{sta.nom}
</td>
<td>
{sta.prenom}
</td>
<td>
{sta.age}
</td>
<td>
{/* Supprimer */}
<input
type="button"
value="Supprimer"
onClick={() =>
supprimerStagiaire(index)
}
/>
{/* Modifier */}
<input
type="button"
value="Modifier"
onClick={() =>
modifierStagiaire(sta, index)
}
/>
</td>
</tr>
);
})
}
</tbody>
</table>
</div>
);
}
export default StagiaireCrud;Exemple 2
Dans cet exemple, nous allons créer une application qui permet à l'utilisateur de saisir son nom et d'afficher un message de bienvenue.
Exemple 3
Dans cet exemple, nous allons créer une application de liste de tâches où l'utilisateur peut ajouter et supprimer des tâches.
Exemple 4
une application de conversion de devises qui permet à l'utilisateur de saisir une valeur en dollars américains (USD) et de la convertir en euros (EUR) en utilisant un taux de change fixe.
Exercice
Créer une application de gestions des joueurs de chaque équipe
this.state = {
listeEquipes:[
{
id: teamId,
name: teamName,
city: teamCity,
players: []
},
...
]
}
- ajouter Equipe
- supprimer Equipe
- modifier Equipe
- ajouter Joueur
- supprimer Joueur
- modifier Joueur
Solution
Veuillez compléter la solution en ajoutant les autres fonctionnalités
Avec Component de type function
```jsx
import React, { useState } from "react";
import "./App.css";
function FootballGame() {
// =========================================================
// STATE : Liste des équipes
// =========================================================
const [listeEquipes, setListeEquipes] = useState([]);
// =========================================================
// STATE : Équipe en cours de saisie
// =========================================================
const [equipe, setEquipe] = useState({
id: '',
nom: '',
city: ''
});
// =========================================================
// STATE : Joueur en cours de saisie
// =========================================================
const [joueur, setJoueur] = useState({
id: '',
nom: '',
num: '',
idEquipe: ''
});
// =========================================================
// STATE : Message
// =========================================================
const [message, setMessage] = useState('');
// =========================================================
// STATE : Index de l'équipe à modifier
//
// -1 signifie qu'aucune équipe n'est en modification
// =========================================================
const [indexEquipeAmodifier, setIndexEquipeAmodifier] = useState(-1);
// =========================================================
// RÉCUPÉRER LES VALEURS DE L'ÉQUIPE
// =========================================================
const getValueEquipe = (event) => {
const {
name,
value
} = event.target;
setEquipe({
...equipe,
[name]: value
});
};
// =========================================================
// RÉCUPÉRER LES VALEURS DU JOUEUR
// =========================================================
const getValueJoueur = (event) => {
const {
name,
value
} = event.target;
setJoueur({
...joueur,
[name]: value
});
};
// =========================================================
// AJOUTER UNE ÉQUIPE
// =========================================================
const ajouterEquipe = () => {
const {
nom,
id,
city
} = equipe;
// Vérifier que tous les champs sont remplis
if (nom !== '' && id !== '' && city !== '') {
const nouvelleEquipe = {
id: id,
nom: nom,
city: city,
listeJoueur: []
};
// Ajouter la nouvelle équipe
setListeEquipes([
...listeEquipes,
nouvelleEquipe
]);
// Réinitialiser le formulaire
setEquipe({
id: '',
nom: '',
city: ''
});
// Effacer le message
setMessage('');
}
else {
setMessage(
'Erreur : tous les champs de l\'équipe sont obligatoires'
);
}
};
// =========================================================
// AJOUTER UN JOUEUR
// =========================================================
const ajouterJoueur = () => {
const {
id,
nom,
num,
idEquipe
} = joueur;
// Vérifier les champs obligatoires
if (id !== '' && nom !== '' && num !== '') {
// Vérifier qu'une équipe existe
if (listeEquipes.length === 0) {
setMessage(
'Erreur : vous devez ajouter une équipe'
);
return;
}
// Copier la liste des équipes
const nouvelleListeEquipes = [...listeEquipes];
// Récupérer l'équipe sélectionnée
const equipeSelectionnee =
nouvelleListeEquipes[Number(idEquipe)];
// Vérifier que l'équipe existe
if (!equipeSelectionnee) {
setMessage(
'Erreur : veuillez sélectionner une équipe'
);
return;
}
// Ajouter le joueur dans une nouvelle liste
equipeSelectionnee.listeJoueur = [
...equipeSelectionnee.listeJoueur,
{
id: id,
nom: nom,
num: num,
idEquipe: idEquipe
}
];
// Mettre à jour la liste des équipes
setListeEquipes(nouvelleListeEquipes);
// Réinitialiser le formulaire joueur
setJoueur({
id: '',
nom: '',
num: '',
idEquipe: ''
});
// Effacer le message
setMessage('');
}
else {
setMessage(
'Erreur : tous les champs du joueur sont obligatoires'
);
}
};
// =========================================================
// SUPPRIMER UNE ÉQUIPE
// =========================================================
const supprimerEquipe = (indexEquipeAsupprimer) => {
setListeEquipes(
listeEquipes.filter(
(eq, index) =>
index !== indexEquipeAsupprimer
)
);
};
// =========================================================
// MODIFIER UNE ÉQUIPE
// =========================================================
const modifierEquipe = (index, eq) => {
// Charger les informations de l'équipe
// dans le formulaire
setEquipe({
id: eq.id,
nom: eq.nom,
city: eq.city
});
// Mémoriser l'index de l'équipe
setIndexEquipeAmodifier(index);
// Effacer le message
setMessage('');
};
// =========================================================
// VALIDER LA MODIFICATION
// =========================================================
const validerModifier = () => {
// Vérifier qu'un index est sélectionné
if (indexEquipeAmodifier === -1) {
return;
}
// Copier la liste des équipes
const nouvelleListeEquipes = [...listeEquipes];
// Récupérer l'ancienne équipe
const ancienneEquipe =
nouvelleListeEquipes[indexEquipeAmodifier];
// Créer la nouvelle équipe
// en conservant les joueurs existants
const nouvelleEquipe = {
id: equipe.id,
nom: equipe.nom,
city: equipe.city,
listeJoueur: [
...ancienneEquipe.listeJoueur
]
};
// Remplacer l'ancienne équipe
nouvelleListeEquipes[indexEquipeAmodifier] =
nouvelleEquipe;
// Mettre à jour la liste
setListeEquipes(nouvelleListeEquipes);
// Quitter le mode modification
setIndexEquipeAmodifier(-1);
// Réinitialiser le formulaire
setEquipe({
id: '',
nom: '',
city: ''
});
// Effacer le message
setMessage('');
};
// =========================================================
// RENDER
// =========================================================
return (
<div>
{/* =================================================
FORMULAIRE ÉQUIPE
================================================= */}
<h2>Ajouter Équipe</h2>
<div>
ID :
<input
type="number"
name="id"
value={equipe.id}
onChange={getValueEquipe}
/>
<br />
Nom :
<input
type="text"
name="nom"
value={equipe.nom}
onChange={getValueEquipe}
/>
<br />
City :
<input
type="text"
name="city"
value={equipe.city}
onChange={getValueEquipe}
/>
<br />
{/* =================================================
BOUTON AJOUTER / MODIFIER
================================================= */}
{
indexEquipeAmodifier !== -1
?
(
<input
type="button"
value="Modifier"
onClick={validerModifier}
/>
)
:
(
<input
type="button"
value="Add Equipe"
onClick={ajouterEquipe}
/>
)
}
</div>
{/* =================================================
MESSAGE
================================================= */}
{
message !== '' && (
<p>
{message}
</p>
)
}
{/* =================================================
FORMULAIRE JOUEUR
================================================= */}
<h2>Ajouter Joueur</h2>
<div>
Équipe :
<select
name="idEquipe"
value={joueur.idEquipe}
onChange={getValueJoueur}
>
<option value="">
-- Sélectionner une équipe --
</option>
{
listeEquipes.map((eq, index) => (
<option
key={index}
value={index}
>
{eq.nom}
</option>
))
}
</select>
<br />
ID :
<input
type="number"
name="id"
value={joueur.id}
onChange={getValueJoueur}
/>
<br />
Nom :
<input
type="text"
name="nom"
value={joueur.nom}
onChange={getValueJoueur}
/>
<br />
Numéro :
<input
type="number"
name="num"
value={joueur.num}
onChange={getValueJoueur}
/>
<br />
<input
type="button"
value="Ajouter le Joueur"
onClick={ajouterJoueur}
/>
</div>
{/* =================================================
LISTE DES ÉQUIPES
================================================= */}
{
listeEquipes.length > 0
?
(
<div>
<h2>
Liste Équipes
</h2>
<table>
<thead>
<tr>
<th>
Actions
</th>
<th>
ID
</th>
<th>
Nom
</th>
<th>
City
</th>
<th>
Joueurs
</th>
</tr>
</thead>
<tbody>
{
listeEquipes.map(
(eq, index) => (
<tr key={index}>
{/* =================
ACTIONS
================= */}
<td>
<input
type="button"
value="Supprimer"
onClick={() =>
supprimerEquipe(index)
}
/>
<input
type="button"
value="Modifier"
onClick={() =>
modifierEquipe(
index,
eq
)
}
/>
</td>
{/* =================
INFORMATIONS
================= */}
<td>
{eq.id}
</td>
<td>
{eq.nom}
</td>
<td>
{eq.city}
</td>
{/* =================
LISTE JOUEURS
================= */}
<td>
{
eq.listeJoueur.length > 0
?
(
<table>
<thead>
<tr>
<th>
ID
</th>
<th>
Nom
</th>
<th>
Numéro
</th>
</tr>
</thead>
<tbody>
{
eq.listeJoueur.map(
(jo, index2) => (
<tr
key={index2}
>
<td>
{jo.id}
</td>
<td>
{jo.nom}
</td>
<td>
{jo.num}
</td>
</tr>
)
)
}
</tbody>
</table>
)
:
(
<span>
Aucun joueur
</span>
)
}
</td>
</tr>
)
)
}
</tbody>
</table>
</div>
)
:
(
<h1>
Rien à afficher
</h1>
)
}
</div>
);
}
export default FootballGame;