Qualunque sia il framework che usiamo per creare applicazioni, la gestione di una form in HTML passa attraverso l'uso di una serie di componenti predefiniti come input, select, textarea. Fatta eccezione per il tag input con l'attributo type impostato su file, quest componenti vengono definiti controlled component in quanto mantengono internamente il loro stato e permettono di leggerlo e impostarlo tramite codice.
Quando un controlled component cambia il proprio stato a seguito di un'interazione dell'utente, è nostro compito intercettare il nuovo stato e salvarlo nello stato del componente. Allo stesso modo, quando il valore nello stato del componente cambia, è nostro compito modificare lo stato del controlled component.
Nel prossimo esempio mettiamo in pratica quanto detto.
class MyFormComponent extends React.Component { constructor(props) { super(props); this.state = { text: '' }; } handleChange(event) { this.setState({ text: event.target.value }); } handleSubmit(event) { alert('submitted'); } render() { return ( <form onSubmit={this.handleSubmit.bind(this)}> <input type="text" value={this.state.text} onChange={this.handleChange.bind(this)}/> <input type="submit" value="Submit" /> </form> ); } }
In questo esempio, abbiamo una form al cui submit (onSubmit) viene invocato il metodo handleSubmit. all'interno della form c'è un tag input che rappresenta il nostro controlled component e al cui cambio (onChange) invochiamo il metodo handleChange (che modifica lo stato del componente col nuovo valore). Al tempo stesso, mettiamo in binding lo stato dell'input con lo stato del component.
In questo caso abbiamo visto il tag input, ma anche i tag select e textarea sfruttano esattamente lo stesso evento (onchange) e la stessa proprietà (value) per sincronizzarsi con lo stato del component.
Quando abbiamo molti controlled component, la quantità di codice da scrivere diventa notevole. Nel prossimo script vedremo come diminuire il codice da scrivere.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Utilizzare ChatGPT con Azure OpenAI
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Workflow di continuous deployment tramite pull request label in GitHub
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Usare le variabili per personalizzare gli stili CSS
Disabilitare automaticamente un workflow di GitHub
Configurare policy CORS in Azure Container Apps
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Definire lo stile CSS in base alle dimensioni del container
Limitare le richieste lato server con l'interactive routing di Blazor 8