Formularze w React.js — niekontrolowane komponenty

Ten wpis jest 21 częścią z 39 w kursie React.js
wp-content/uploads/2017/10/React_logo_wordmark-300x101-1-e1508612391308.png
  1. React.js: Wprowadzenie do kursu od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami

Część druga formularzy w React.js — tym razem formularze tak zwane „niekontrolowane” — czyli Uncontrolled Components. Czym są i jak się ich używa? No i po co Ci w ogóle formularze niekontrolowane w React.js?

Niekontrolowane formularze — Uncontrolled Components

W większości przypadków poleca się używanie jednak kontrolowanych formularzy. Jak już wcześniej pisałem, w kontrolowanych formularzach to React jest jedynym źródłem danych i tylko React kontroluje treść. W formularzach niekontrolowanych, dane są obsługiwane przez przeglądarkę (przez DOM).

Obsługa formularzy niekontrolowanych

W poprzednim odcinku kursu, aby obsłużyć pole formularza, musiałaś/eś dodać do niego najczęściej prop value oraz funkcję do onChange. To jednak nie jest jedyne wyjście. Można też użyć ref.

Czym jest ref

ref to nic innego jak referencja na element w DOM. Stworzysz ją używając props ref na elemencie lub komponencie i przekazując do niego funkcję:

<input ref={input => this.input = input} />

Zawartość inputa będzie kontrolowana przez użytkownika, przeglądarkę i DOM. A wartość będziesz mogła/mógł pobrać na przykład dopiero gdy będzie Ci potrzebna. Modyfikując przykład z poprzedniego odcinka:

class MyFirstForm extends React.Component {
  render() {
    return (
      <div>
        <input ref={input => this.input = input} />
        <button onClick={this.submitForm}>Submit</button>
      </div>
    );
  }

  submitForm = () => {
    console.log(this.input.value); // zawartość inputa
  }
}

Domyślne wartości

W niekontrolowanym polu formularza nie możesz ustawić atrybutu value (bo wtedy stanie się kontrolowany 😉 ). Jak więc przypisać domyślne wartości polom? Powstał do tego osobny props o nazwie defaultValue:

<input ref={input => this.input = input} defaultValue="Type of Web" />

Input type file

W React jest jeden wyjątek — <input type="file" /> zawsze musi być niekontrolowany. Wynika to z ograniczeń samego DOM — wszak do takiego inputowi nie możemy ustawić żadnej wartości programistycznie 🙂 Możemy ją tylko ewentualnie pobrać po tym jak użytkownik doda plik. Przykładowy formularz:

class FileInput extends React.Component {
  render() {
    return (
      <form onSubmit={this.submitForm}>
        <label>
          <input
            type="file"
            ref={input => this.fileInput = input}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }

  submitForm = (e) => {
    e.preventDefault();
    console.log(this.fileInput.files[0].name);
  }
}

Kontrolowane czy niekontrolowane?

Jako dobrą praktykę polecam używać formularzy kontrolowanych dopóki naprawdę nie potrzebujesz czegoś co dają niekontrolowane.
Ale nie słuchaj mnie. Sam(a) wyrób sobie opinię 🙂 Poczytaj, potestuj, i koniecznie Naucz się React na naszym szkoleniu!

Demo

See the Pen Kurs React.js — niekontrolowany formularz — typeofweb.com by Michał Miszczyszyn (@mmiszy) on CodePen.

Podsumowanie

Umiesz już obsługiwać formularze na różne sposoby 🙂 Brawo Ty! A więc nie pozostało już Ci wiele do nauczenia się w React. Właściwie wiedza, którą już posiadasz powinna Ci pozwolić na tworzenie rozbudowanie aplikacji! Czas na połączenie Reacta z innymi bibliotekami! W kolejnym odcinku.

Jeśli chcesz na bieżąco dowiadywać się o kolejnych częściach kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.

Ćwiczenie

Przerób cały formularz z poprzedniego odcinka na niekontrolowane elementy:
codepen.io/mmiszy/pen/mXZLwp

Nawigacja po kursie:
  1. React.js: Wprowadzenie do kursu od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami