React
Reaguj formularze

Kontrolowane komponenty

Kontrolowany komponent jest powiązany z wartością, a jego zmiany są obsługiwane w kodzie za pomocą wywołań zwrotnych opartych na zdarzeniach.

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

}

W tym przykładzie inicjujemy stan pustym obiektem osoby. Następnie łączymy wartości 2 wejść z poszczególnymi kluczami obiektu osoby. Następnie, gdy użytkownik handleChange , przechwytujemy każdą wartość w funkcji handleChange . Ponieważ wartości składników są przypisane do stanu, możemy ponownie wysłać jako typy użytkowników, wywołując setState() .

UWAGA: Brak wywołania setState() podczas obsługi kontrolowanych komponentów spowoduje, że użytkownik wpisze, ale nie zobaczy danych wejściowych, ponieważ React wyświetla zmiany tylko wtedy, gdy zostanie mu to nakazane.

Ważne jest również, aby pamiętać, że nazwy danych wejściowych są takie same jak nazwy kluczy w obiekcie osoby. To pozwala nam uchwycić wartość w formie słownika, jak widać tutaj.

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

person[event.target.name] jest taka sama jak person.firstName || person.lastName . Oczywiście zależy to od tego, jakie dane są obecnie wpisywane. Ponieważ nie wiemy, gdzie użytkownik będzie wpisywać, użycie słownika i dopasowanie nazw wejściowych do nazw klawiszy pozwala nam przechwycić dane wejściowe użytkownika nie bez względu na to, skąd wywoływany jest onChange.