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 Benchmark.NET per misurare le performance
Sfruttare lo streaming di una chiamata Http da Blazor
Creare gruppi di client per Event Grid MQTT
Copiare automaticamente le secret tra più repository di GitHub
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Implementare il throttling in ASP.NET Core
Hosting di componenti WebAssembly in un'applicazione Blazor static
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Utilizzare Tailwind CSS all'interno di React: installazione
Cambiare la chiave di partizionamento di Azure Cosmos DB
Utilizzare database e servizi con gli add-on di Container App
I più letti di oggi
- Impostare un elemento come ridimensionabile tramite CSS
- Proteggersi dagli attacchi di Open Redirect in ASP.NET Core MVC
- Personalizzare l'errore del rate limiting middleware in ASP.NET Core
- Accedere alla console di una Azure Container App
- Modificare i metadati nell'head dell'HTML di una Blazor Web App
- Gli oggetti CallOut di Expression Blend 4.0
- SQL Server 2005 December CTP
- Sfruttare le nuove tipologie di input di HTML5 con ASP.NET 4.0
- Upload da una pagina web con Dundas Upload