Dall'archivio script > HTML5

Ridurre il codice per gestire gli eventi dei controlled component in una form con React

di Stefano MostardaStefano Mostarda, in HTML5, React,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi