Formularze w React.js — kontrolowane komponenty

Ten wpis jest 20 częścią z 41 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
  40. Wady React Hooks
  41. React Hooks: Piszemy własne hooki!

Dzisiaj zajmiesz się imlementacją formularzy w React.js. Już wcześniej dokonywałaś/eś interakcji z polami formularza — ale raczej w prosty sposób. Dzisiaj o formularzach kontrolowanych w React.js

Kontrolowane formularze w React.js

Kontrolowane komponenty w React.js (Controlled Components) — to takie komponenty, których wewnętrzny stan jest kontrolowany przez Reacta. O czym mówię? Weźmy prosty kod:

<input onChange={this.handleChange} />

Ten input nie jest kontrolowany przez Reacta dlatego, że jego zawartość jest kontrolowana tylko przez użytkownika i przeglądarkę. React na nią nie wpływa. A tutaj ten sam input, ale już kontrolowany:

<input value={this.state.value} onChange={this.handleChange} />

Teraz jeśli spróbujesz coś wpisać w taki input — to aby zmiany były w ogóle widoczne, musisz też na bieżąco aktualizować wartość w state.value. Jakby to miało wyglądać? Jest to dość proste:

class MyFirstForm extends React.Component {
  state = {value: ''};

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input value={this.state.value} onChange={this.handleChange} />
    );
  }
}

Tym sposobem React jest jedynym źródłem prawdy.

Elementy w formularzach

Przyjrzysz się teraz innym elementom, których używasz w formularzach 🙂 Wszystkie mogą być kontrolowane:

select

Tutaj warto zwrócić uwagę na dwie rzeczy:

  • żaden option nie ma atrybutu selected znanego z HTML
  • element <select> ma atrybut value

Odpowiednia wartość value sprawia, że React sam automatycznie wie, który element na liście jest wybrany i poprawnie renderuje formularz:

class MyFirstForm extends React.Component {
  state = {value: 'blue'}

  render() {
    return (
      <select value={this.state.value} onChange={this.handleChange}>
        <option value="red">Czerwony</option>
        <option value="blue">Niebieski</option>
        <option value="green">Zielony</option>
      </select>
    );
  }
}

W powyższym przykładzie wybrany będzie Niebieski.

textarea

W HTML-u element textarea zachowuje się nieco inaczej niż pozostałe inputy. Jego wartość określona jest przez jego dziecko, a nie przez atrybut:

<textarea>Zawartość</textarea>

W React jest inaczej. Ustandaryzowano to i wykorzystywany jest atrybut value:

<textarea value={this.state.value} />

Dzięki temu textarea możesz traktować tak jak inne pola formularza bez konieczności robienia wyjątków 🙂

checkboxradio

Te inputy mają, podobnie jak w HTML, specjalny atrybut checked do którego należy przekazać zmienną typu boolean — true lub false.

<input type="checkbox" checked={this.state.isChecked} />

Demo

Przyszedł czas na demo — przykład kontrolowanego formularza w React.js:

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

Podsumowanie

Przedstawiłem tutaj podstawowy sposób obsługi formularzy w React.js. W kolejnym odcinku kursu porozmawiamy o formularzach niekontrolowanych. Poznaj React w dwa dni na szkoleniu z Type of Web!

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.

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Ćwiczenie

Ćwiczenie: Spróbuj tak zmienić obsługę formularza, aby niepotrzebne było używanie osobnej funkcji handle…Change dla każdego elementu.

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

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
26 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Ola Gruchała
Ola Gruchała
1 rok temu

Trochę to trwało, ale jest:
https://jsfiddle.net/OlaGruchala/jzLno7p0/10/

Adrian Kasina
Adrian Kasina
1 rok temu

Coś przegapiłem, albo nie doczytałem. W punkcie 8 kursu, napisałeś, że aby użyć state potrzebny jest konstruktor klasy a w nim wywalanie super(). W formularzu nie używasz konstruktora i działa. Dlaczego?

Dukov
Dukov
1 rok temu

Heh nigdy nie umiałem się przekonać do żadnego frameworka, ani biblioteki, jedynie jakieś animacje w jquery, albo jakieś pojedyncze elementy jak charts.js czy scroll revealjs, ale ten React wydaje się świetny. BTW nie mam dziś czasu się zagłębiać, ale jak przeglądam to ten kurs to kawał dobrej roboty.

Rotarepmi
Rotarepmi
1 rok temu
Mateusz Flisikowski
1 rok temu

comment image

Artur Grabowski
Artur Grabowski
1 rok temu

a co masz w wywolaniu ? 🙂 bo Twoje rozwiazanie wyglada kozacko

Mateusz Flisikowski
1 rok temu

czy robię to ok, czy można lepiej?

Ola Gruchała
Ola Gruchała
1 rok temu

Mam pytanie o textarea. Może ktoś znajdzie czas żeby zajrzeć 🙂 Próbuję wyczyścić textarea po kliknięciu w „send”, ale ponieważ jest to u mnie komponent kontrolowany to rozumiem że musiałabym to zrobić przez zmianę stanu. To z kolei nie daje efektu bo zmiana stanu w tym momencie czyści mi za szybko wartość i w efekcie zamiast tekstu wysyłam pusty string…

Jak to zrobić? Musze użyć niekontrolowanego komponentu?

https://codepen.io/OlaGruchala/pen/yrBBpw?editors=0010

Artur Grabowski
Artur Grabowski
1 rok temu

Mam i ja! Przesylanie argumentow w tym jezyku/frameworku jest na tyle roznych sposobow ze to jest jakas masakra.

https://pastebin.pl/view/2541f8f9

Artur Grabowski
Artur Grabowski
1 rok temu

Oczywiscie masz racje 😀 zapomanialem usunac tego co bylo na poczatku 🙂

https://pastebin.pl/view/5dfd7565

Artur Grabowski
Artur Grabowski
1 rok temu

Pewnie masz racje :p ale chodzi mi bardziej o takie rzeczy :

{this.props.contacts.map(this.contactToContactItem)}
onClick={this.displayMessage.bind(this,
message)

itd.

Rafał Sikora
Rafał Sikora
5 miesięcy temu

Wszystko cacy 😉 .. ale
często dane nie wyglądają tak prosto: state = {value: ”};

tylko
state = { data : [ { „value” : 1, … }, { „value2” : 2, … } ] jak później modyfikować takie dane?

Rafał Sikora
Rafał Sikora
5 miesięcy temu

hmm w przykładzie z listą kontaktów
class App extends React.Component {
constructor() {
super();
this.state = { users : data,
test : 1 }
} …

i zew. danymi data = [ { „name” : „John” … } , „name” : „Lee” … ];

próbuję właśnie zdobić jak pokazałeś:

this.setState(prevState => {
return {
users : prevState.users.map( el => {
el.status = ‚online’; // czy tu następuje mutacja?
return el;
})
};
}, function() { console.log( data ) });
Lista kontaktów nie odświeża się.

Rafał Sikora
Rafał Sikora
5 miesięcy temu

hmm generalnie nie mogę znaleźć przyczyny:

Rafał Sikora
Rafał Sikora
5 miesięcy temu

tak mi się właśnie zdawało 😉
naprawiłem state taką konstrukcją:

tester = () => {
console.log( ‚tester: ‚ + this.state.test );

this.setState(prevState => {
return {
users : function(){ let a = […prevState.users.map( (json, index) => {

let jsonnew = {…json};
if( index == 13 ){ jsonnew.status = „online”; }
return jsonnew;
})];

// powoduje update
a.push({ „id” : a.length + 1, „login” : „k9”, „name” : „Suzanne”, „surname” : „Lee”, „department” : „Test” + ( a.length + 1 ) });
console.log(a);

return a;
}(),
test : prevState.test + 1
};
}, function() { console.log( data ); console.log( this.state.users ); console.log( this.state.test ) });
}

@edit:
znalazłem również ciekawe rozwiązanie:

… users : function(){
// test 2
let stateCopy = JSON.parse( JSON.stringify( prevState.users ) );
stateCopy[13].status = ‚online’;
return stateCopy;
}(), …