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
Sviluppare applicazioni con supporto al doppio schermo con Xamarin
Eseguire una chiamata asincrona durante la validazione di una form in Blazor
Abilitare Hot Module Replacement in Angular
Indicizzare Cosmos DB con Azure Search
Connettersi ad ASP.NET Core SignalR da Blazor WebAssembly
Utilizzare le JavaScript Resize Observer API per rispondere ai cambiamenti di dimensione di un oggetto HTML
Eseguire integration test di un progetto ASP.NET Core
The .NET 5 & C# 9 Show
Eseguire più query che tornano un singolo dato in un solo comando con la libreria Entity Framework Plus
Utilizzare le annotazioni nei metadati di Entity Framework Core per marcare campi come non modificabili
Modificare la modalità di esecuzione delle query con Include in Entity Framework Core 5
Autenticazione condizionale a due fattori con Azure Active Directory B2C
I più letti di oggi
- Creare un web server locale con LiveReload
- Operatori di confronto in JavaScript: == e ===
- Microsoft WebCamp - Roma, Milano
- Dev Night #2: Serverless - Milano
- Disponibile la release finale di Moonlight 1.0
- Lancio ufficiale di Moonlight 1.0
- Disponibile il Silverlight Toolkit March 2009 Release
- MonoTouch in versione 1.0: C# per iPhone diventa realtà