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
Disabilitare automaticamente un workflow di GitHub (parte 2)
Usare il versioning con i controller di ASP.NET Core Web API
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Usare lo spread operator con i collection initializer in C#
Utilizzare le collection expression in C#
Usare le collection expression per inizializzare una lista di oggetti in C#
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Ottimizzazione dei block template in Angular 17
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Generare file PDF da Blazor WebAssembly con iText