Comment créer des formulaires contrôlés dans Reactjs ?

Dans ReactJs, un composant de formulaire contrôlé est un composant où ReactJS contrôle l’état et les valeurs de ce formulaire. Chaque fois que l’état du composant change, le rendu du composant est synchronisé avec l’état du composant.

Voici comment vous pouvez créer des formulaires contrôlés dans Reactjs :

1. Tout d’abord, vous devez importer React et la classe Component de la bibliothèque react :

```
import React, { Component } from ‘react’;
```

1. Ensuite, vous créez une classe pour votre composant :

```
class MonForm extends Component { // Le code de votre composant ira ici
}
export default MonForm;
```

1. Dans cette classe, vous créez un état pour chaque champ de votre formulaire :

```
class MonForm extends Component { constructor(props) { super(props); this.state = { nom: ‘’, email: ‘‘ }; } // Le reste du code de votre composant ira ici
}
```

1. Ensuite, vous devez lier les champs d’entrée de votre formulaire à l’état de votre composant. Pour ce faire, vous devez définir la valeur de chaque champ d’entrée sur le même nom que la propriété de l’état correspondante :

```
class MonForm extends Component { constructor(props) { super(props); this.state = { nom: ‘’, email: ‘‘ }; }

render() { return ( ); } } ```

1. Ensuite, vous créez une méthode pour gérer le changement des champs d’entrée. Dans cette méthode, vous mettez à jour l’état de votre composant pour refléter le changement :

```
class MonForm extends Component { constructor(props) { super(props); this.state = { nom: ‘’, email: ‘‘ }; }

handleInputChange = (event) => { this.setState({ [event.target.name]: event.target.value }); } render() { return ( ); } } ```

1. Enfin, vous créez une méthode pour gérer la soumission du formulaire. Dans cette méthode, vous pouvez faire ce que vous voulez avec les valeurs du formulaire.

```
class MonForm extends Component { constructor(props) { super(props); this.state = { nom: ‘’, email: ‘‘ }; }

handleInputChange = (event) => { this.setState({ [event.target.name]: event.target.value }); } handleSubmit = (event) => { event.preventDefault(); alert(`Nom: ${this.state.nom}\nEmail: ${this.state.email}`); } render() { return ( ); } } ```

Et voilà ! Vous avez maintenant un formulaire contrôlé avec ReactJs. Chaque fois que l’utilisateur change les valeurs du formulaire, ReactJs met à jour l’état de votre composant, gardant ainsi votre composant et le DOM parfaitement synchronisés.