Tworzenie formularza w React – Kurs React – cz. 10

Jak tworzyć formularze w React? W tej części kursu przedstawię jak stworzyć bardzo prosty formularz bez użycia zewnętrznych bibliotek (np. formika, redux-forma).

Zapisywanie danych w formularzu Reactowym odbywa się trochę inaczej, niż w standardowym formularzu HTML. W zwykłym HTML dane zapisywane są w elementach HTML formularza. Natomiast w React odbywa się to za pomocą komponentów kontrolowanych.

Co w artykule?

• czym są komponenty kontrolowane?
• tworzenie prostego formularza w React (bez użycia zewnętrznych bibliotek np. formik, redux-form).

Czym są komponenty kontrolowane?

Jak sama nazwa wskazuje komponenty są kontrolowane. Przez co? Po co? Aby w pełni wykorzystać możliwości Reacta, musi mieć on dostęp do wartości pól w formularzu. Oznacza to, że React ma kontrolę nad wartościami, które użytkownik wprowadza do formularza. Odbywa to się za pomocą atrybutu value w inpucie. Najpierw definiujemy miejsce, w którym te wartości będą zapisywane (np. stan komponentu), a następnie dzięki funkcji onChange zmieniamy jej wartość. Od tego momentu React kontroluje wartości inputów, dzięki czemu mamy do nich pełny dostęp.

Wymagania

Do tej części kursu wymagane jest:

• edytor kodu
• zainstalowany Node.js (wraz z npm lub yarn)

Prosty formularz w React

Na początek przygotuję sobie nową aplikację za pomocą create-react-app.

npx create-react-app react-example-form

Stworzyłem prosty formularz, który wyświetla dane zapisane w stanie Reactowym oraz wyświetla je w konsoli po kliknięciu pola Submit. Poniżej cały kod formularza w React.

Teraz wyjaśnię co ten kod robi.

Dane zapisywane są w state

Wszystkie dane zapisywane są w state. Na początku ustawiam domyślne wartości pól w kontruktorze.

this.state = {
    firstName: '',
    lastName: '',
};

W elementach formularza dodaliśmy funkcję onChange, która będzie śledziła zmiany i zapisywała wartości inputów do state.

this.setState({
    [target.name]: target.value,
});

Sterowanie wartościami w HTML – komponent kontrolowany

return (
    <div>
        <h1>Form example</h1>
        <p><input name="firstName" type="text" value={firstName} onChange={this.handleChange}/></p>
        <p><input name="lastName" type="text" value={lastName} onChange={this.handleChange}/></p>
        <button type="submit" onClick={this.handleSubmit}>Test</button>
        <p>Submitted values: {valuesList}</p>
    </div>
);

Przez atrybut value sterujemy wartościami pól za pomocą Reacta. onChange nasłuchuje na zmiany wartości, a następnie przekazuje je do funkcji handleChange.

valueList to prosta funkcja, która zwraca nam wartości formularza w znacznikach <li>.

const valuesList = values.map(item => {
    return (
        <li>{item}</li>
    );
})

values to natomiast ręcznie utworzona tablica zawierająca firstName i lastName.

const values = [
    firstName,
    lastName
];

Wysłanie danych czyli funkcja handleSubmit

Gdy już mamy prosty formularz możemy wysłać pierwsze dane do API. W tej części już nie wykonam żądania, tylko wyświetlę wartość pól w konsoli przeglądarki. Zachęcam do zmiany tej funkcji i próby wysłania danych do jakiegoś API.

handleSubmit() {
    console.log(this.state);
}

handleSubmit to funkcja, która wykona się po kliknięciu w przycisk Test.

Podsumowanie

W tej części kursu przedstawiłem jak stworzyć prosty formularz w React bez użycia zewnętrznych bibliotek. Dzięki prostocie tego komponentu łatwo zrozumieć jak działają formularze w React.

Do tworzenia aplikacji, w których są formularze najczęściej wykorzystuje się zewnętrzne biblioteki. Oszczędzają czas, przyspieszają pracę i dostarczają wiele funkcjonalności. Najpopularniejsze biblioteki to m.in. formik, react hook form.