Formularze w React.js — niekontrolowane komponenty

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
40. Wady React Hooks
41. React Hooks: Piszemy własne hooki!

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 Poznaj React z naszymi szkoleniami!

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