React
Forme di reazione

Componenti controllati

Un componente controllato è associato a un valore e le sue modifiche vengono gestite nel codice utilizzando callback basati su eventi.

class CustomForm extends React.Component {
constructor() {
    super();
    this.state = {
        person: {
            firstName: '',
            lastName: ''
        }
    }
}

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

render() {
    return (
        <form>
            <input 
            type="text"
            name="firstName"
            value={this.state.firstName}
            onChange={this.handleChange.bind(this)} />

            <input 
            type="text"
            name="lastName"
            value={this.state.lastName}
            onChange={this.handleChange.bind(this)} />
        </form>
    )
}

}

In questo esempio inizializziamo lo stato con un oggetto persona vuota. Quindi leghiamo i valori dei 2 input alle singole chiavi dell'oggetto person. Quindi, mentre l'utente digita, handleChange ciascun valore nella funzione handleChange . Poiché i valori dei componenti sono vincolati allo stato, possiamo eseguire il rerender mentre l'utente digita chiamando setState() .

NOTA: se non si chiama setState() quando si ha a che fare con componenti controllati, l'utente deve digitare, ma non vedere l'input perché React esegue solo le modifiche quando gli viene richiesto di farlo.

È anche importante notare che i nomi degli input sono gli stessi dei nomi delle chiavi nell'oggetto person. Questo ci permette di catturare il valore nel modulo del dizionario come visto qui.

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

person[event.target.name] è uguale a person.firstName || person.lastName . Ovviamente ciò dipenderà dal tipo di input attualmente digitato. Poiché non sappiamo dove l'utente digiterà, utilizzando un dizionario e facendo corrispondere i nomi di input ai nomi dei tasti, ci permetterà di catturare l'input dell'utente no importa da dove viene chiamato il onChange.