Enregistrement et édition de données via les paramètres d'URL dans React Router

Notre application peut maintenant charger les données pour chaque produit individuel depuis le stockage. Dans cette leçon, nous allons commencer à implémenter l'ajout d'informations sur le produit et leur édition via les paramètres d'URL.

Pour enregistrer ou modifier les données, nous allons à nouveau utiliser le composant Form. Pour commencer, ouvrons product.jsx et ajoutons à la fin du rendu un bouton pour éditer les données du produit - après le dernier paragraphe (n'oubliez pas d'importer Form dans le fichier) :

<Form action="edit">
	<button type="submit">edit</button>
</Form>

Maintenant, nous avons un bouton d'édition sur la page du produit. Ensuite, nous ferons en sorte qu'en cliquant sur ce bouton, nous soyons redirigés vers une page avec un formulaire où nous pourrons saisir les données. Pour cela, nous créerons une autre route avec products/:productId/edit. Créons un composant pour cela.

Ainsi, dans le dossier routes, nous créerons un nouveau fichier edit.jsx. Ici, nous aurons un formulaire avec les champs name, cost et amount à remplir, ainsi qu'un bouton de sauvegarde. Tout cela se trouvera dans le composant EditProduct. N'oubliez pas de spécifier les attributs name, ils nous seront utiles dans les prochaines leçons :

import { Form } from 'react-router-dom';

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Nom :</span>
				<input placeholder="name" type="text" name="name" />
			</div>
			<div>
				<span>Coût :</span>
				<input placeholder="cost" type="text" name="cost" />
			</div>
			<div>
				<span>Quantité :</span>
				<input placeholder="amount" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">sauvegarder</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Prenez l'application que vous avez créée dans les travaux pratiques des leçons précédentes. En utilisant le contenu de cette leçon, ajoutez un bouton d'édition des données de l'étudiant. Créez le fichier edit.jsx pour l'édition avec la fonction EditStudent, qui contiendra un formulaire pour saisir les données de l'étudiant.