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
Gestire i null nelle reactive form tipizzate di Angular
Usare una container image come runner di GitHub Actions
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Limitare le richieste lato server con l'interactive routing di Blazor 8
Utilizzare Tailwind CSS all'interno di React: primi componenti
Le novità di Angular: i miglioramenti alla CLI
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Eseguire attività basate su eventi con Azure Container Jobs
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Effettuare il binding di date in Blazor
Creare un'applicazione React e configurare Tailwind CSS
I più letti di oggi
- C# 4
- Spaziatura tra i caratteri in Silverlight 5
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Segui in tempo reale il TechEd 2004
- da oggi è possibile fare login velocemente con LinkedIn e Google. a questi si aggiunge il supporto già attivo per Facebook, Twitter, Microsoft Account, Windows Hello e OpenID, per darvi sempre più possibilità di accedere semplicemente alla nostra community! #aspitalia
- Migrare una service connection a workload identity federation in Azure DevOps
- Evitare postback multipli in un UpdatePanel