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
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Utilizzare le collection expression in C#
Assegnare un valore di default a un parametro di una lambda in C#
Utilizzare database e servizi con gli add-on di Container App
Disabilitare automaticamente un workflow di GitHub
Aggiungere interattività lato server in Blazor 8
Usare una container image come runner di GitHub Actions
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Routing statico e PreRendering in una Blazor Web App
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Eseguire attività pianificate con Azure Container Jobs