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
Utilizzare la libreria Ngx-take-until-destroy per eliminare le subscription in un component
Combinare pagine Blazor e ASP.NET Core MVC nello stesso sito
Il futuro delle applicazioni Windows con .NET 5
Utilizzare app-shell per rendere un'applicazione Angular più responsiva alla partenza
Utilizzare una direttiva di Angular per limitare i caratteri inseribili in una textbox
Utilizzare AAD su SQL Database durante lo sviluppo con Visual Studio
Le novità di C# 9
Blazor: from 0 to SPA
Messaggi in tempo reale con Blazor Server
Disabilitare un pulsante in Blazor durante il salvataggio
Blazor <3 Javascript
Riconoscimento dei contenuti delle immagini con Azure Logic Apps e Content Moderator
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à