Molto spesso capita di avere una form con molti campi e quindi molti controlled component. Se avessimo 40 campi, dovremmo scrivere quaranta metodi molto simili tra loro per gestire il cambio di valore di questi campi. Per ridurre il codice, possiamo creare un unico metodo che sia in grado di gestire il cambio di valore di tutti i controlled component.
class MyFormComponent extends React.Component { constructor(props) { super(props); this.state = { firstName: '', lastName: '' }; } handleChange(event) { this.setState({ [event.target.name]: event.target.value }); } handleSubmit(event) { alert('submitted'); } render() { return ( <form onSubmit={this.handleSubmit.bind(this)}> <label>First name</label> <input type="text" name="firstName" value={this.state.firstName} onChange={this.handleChange.bind(this)}/> <label>Last name</label> <input type="text" name="lastName" value={this.state.lastName} onChange={this.handleChange.bind(this)}/> <input type="submit" value="Submit" /> </form> ); } }
In questo esempio, abbiamo due textbox che al cambio invocano lo stesso metodo (handleChange). Questo metodo sfrutta il nome della textbox che ha scatenato l'evento come nome della proprietà dello stato da impostare. L'importante è impostare l'attributo name dei vari campi e chiamare le proprietà dello stato del component allo stesso modo.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Implementare il throttling in ASP.NET Core
Effettuare delete massive con Entity Framework Core 7
Utilizzare database e servizi con gli add-on di Container App
Potenziare Azure AI Search con la ricerca vettoriale
Gestire i null nelle reactive form tipizzate di Angular
Usare il versioning con i controller di ASP.NET Core Web API
Usare le variabili per personalizzare gli stili CSS
Le novità di Angular: i miglioramenti alla CLI
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Utilizzare ChatGPT con Azure OpenAI
Definire lo stile CSS in base alle dimensioni del container
Eseguire attività pianificate con Azure Container Jobs
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10