I moduli controllati in Reactjs sono moduli i cui valori di input sono controllati dallo stato del componente React. È chiamato moduli controllati perché ogni cambio di stato del modulo viene controllato dall’evento onChange. Ecco come crearne uno:
```
import React from ‘react’;
class ControlledForm extends React.Component { constructor(props) { super(props); this.state = { input: ‘’, textarea: ‘‘ }; this.handleChange = this.handleChange.bind(this); }
handleChange(event) { this.setState({ [event.target.name]: event.target.value }); } handleSubmit(event) { event.preventDefault(); console.log(this.state); } render() { return ( ); } }export default ControlledForm;
```
Nell’esempio sopra, stiamo usando un modulo con un input di tipo “text” e una textarea. L’evento `onChange` chiama `handleChange` ogni volta che l’utente tenta di cambiare l’input. Questo evento aggiorna lo stato con il nuovo valore. Quando il modulo viene inviato con il pulsante “Submit”, viene richiamata la funzione `handleSubmit` che impedisce il normale comportamento di invio dell’evento del modulo (che causerebbe un ricaricamento della pagina) e stampa lo stato attuale nel log della console.
Ricorda, per rendere un input controllato da React (e quindi fare l’input un “componente controllato”), bisogna mettere il suo valore pari allo stato corrispondente e un handler per l’evento onChange.