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
Usare le variabili per personalizzare gli stili CSS
Determinare lo stato di un pod in Kubernetes
Generare token per autenicarsi sulle API di GitHub
Limitare le richieste lato server con l'interactive routing di Blazor 8
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Potenziare Azure AI Search con la ricerca vettoriale
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Utilizzare ChatGPT con Azure OpenAI
C# 12: Cosa c'è di nuovo e interessante
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Usare un KeyedService di default in ASP.NET Core 8
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8