- React.js: Wprowadzenie do kursu od podstaw
- Poznaj React.js
- Pierwszy komponent w React.js
- Props czyli atrybuty w React.js
- Podział na komponenty w React.js
- Klasy jako komponenty React.js
- Interakcja z komponentami React.js
- Stan komponentów React.js
- State w React.js 2
- Metody cyklu życia komponentu w React.js
- React.js w przykładach: filtrowanie statycznej listy
- Tworzenie aplikacji React.js dzięki create-react-app
- React.js na GitHub Pages dzięki create-react-app
- Testowanie aplikacji React.js — podstawy Enzyme
- Testowanie React.js w Enzyme — props, state i interakcje
- Poprawne bindowanie funkcji w React.js
- Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
- Komunikacja pomiędzy komponentami w React.js
- Komunikacja z API w React.js
- Formularze w React.js — kontrolowane komponenty
- Formularze w React.js — niekontrolowane komponenty
- Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
- TDD w React.js z pomocą react-testing-library
- Flux i Redux: globalny store i jednokierunkowy przepływ danych
- React + Redux — kurs: wprowadzenie i podstawy
- React + Redux — filtrowanie listy, proste selektory
- Projektowanie komponentów: Presentational & Container Components
- Asynchroniczność w Redux: redux-thunk
- Kiedy używać state, a kiedy Redux?
- Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
- Leniwe ładowanie komponentów w React dzięki import
- Higher Order Reducers — Redux i powtarzanie kodu
- React Hooks — wprowadzenie i motywacja
- React Hooks: useState, czyli stan w komponentach funkcyjnych
- React Hooks: useState — wiele stanów, callbacki i inne niuanse
- React Hooks: useEffect — efekty uboczne w komponencie
- React Hooks a żądania do API
- useReducer — przenoszenie logiki poza komponent
- useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
- Wady React Hooks
- 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 Naucz się 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
- React.js: Wprowadzenie do kursu od podstaw
- Poznaj React.js
- Pierwszy komponent w React.js
- Props czyli atrybuty w React.js
- Podział na komponenty w React.js
- Klasy jako komponenty React.js
- Interakcja z komponentami React.js
- Stan komponentów React.js
- State w React.js 2
- Metody cyklu życia komponentu w React.js
- React.js w przykładach: filtrowanie statycznej listy
- Tworzenie aplikacji React.js dzięki create-react-app
- React.js na GitHub Pages dzięki create-react-app
- Testowanie aplikacji React.js — podstawy Enzyme
- Testowanie React.js w Enzyme — props, state i interakcje
- Poprawne bindowanie funkcji w React.js
- Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
- Komunikacja pomiędzy komponentami w React.js
- Komunikacja z API w React.js
- Formularze w React.js — kontrolowane komponenty
- Formularze w React.js — niekontrolowane komponenty
- Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
- TDD w React.js z pomocą react-testing-library
- Flux i Redux: globalny store i jednokierunkowy przepływ danych
- React + Redux — kurs: wprowadzenie i podstawy
- React + Redux — filtrowanie listy, proste selektory
- Projektowanie komponentów: Presentational & Container Components
- Asynchroniczność w Redux: redux-thunk
- Kiedy używać state, a kiedy Redux?
- Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
- Leniwe ładowanie komponentów w React dzięki import
- Higher Order Reducers — Redux i powtarzanie kodu
- React Hooks — wprowadzenie i motywacja
- React Hooks: useState, czyli stan w komponentach funkcyjnych
- React Hooks: useState — wiele stanów, callbacki i inne niuanse
- React Hooks: useEffect — efekty uboczne w komponencie
- React Hooks a żądania do API
- useReducer — przenoszenie logiki poza komponent
- useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
- Wady React Hooks
- React Hooks: Piszemy własne hooki!
Czy po React będzie dalsza kontunucaja
z Redux albo React Router
ew. Redux Saga lub Redux Form ?
Redux i React Router — tak 🙂
Hej. Oto mój kod:
https://github.com/marek2222/react_typeofweb/tree/_21
Od Reacta 16.3 zaszly pewne zmiany odnosnie refs.. Warto sie z nimi zapoznac:
https://reactjs.org/docs/refs-and-the-dom.html
Prawda! Muszę zaktualizować.
Mój kod: https://codepen.io/anon/pen/qgMMXV?editors=1010