React
Réagir aux formes

Composants contrôlés

Un composant contrôlé est lié à une valeur et ses modifications sont traitées dans le code à l'aide de rappels basés sur des événements.

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>
    )
}

}

Dans cet exemple, nous initialisons l'état avec un objet personne vide. Nous lions ensuite les valeurs des 2 entrées aux clés individuelles de l'objet personne. Ensuite, en tant qu’utilisateur, nous capturons chaque valeur de la fonction handleChange . Étant donné que les valeurs des composants sont liées à l'état, nous pouvons réexécuter en tant que type d'utilisateur en appelant setState() .

REMARQUE: Ne pas appeler setState() avec des composants contrôlés provoquera la saisie de l'utilisateur, mais ne verra pas l'entrée car React ne restitue que les modifications quand il lui est demandé de le faire.

Il est également important de noter que les noms des entrées sont identiques aux noms des clés dans l'objet personne. Cela nous permet de capturer la valeur dans la forme du dictionnaire comme vu ici.

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

person[event.target.name] est la même chose que person.firstName || person.lastName Bien sûr, cela dépend de l’entrée en cours de saisie. Comme nous ne savons pas où l’utilisateur va taper, en utilisant un dictionnaire et en faisant correspondre les noms d’entrée avec les noms des clés, cela nous permet de capturer la saisie utilisateur. Peu importe où onChange est appelé.