Formularze w React.js — kontrolowane komponenty • Type of Web

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 :)

`checkbox` i `radio`

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:

Podsumowanie

Przedstawiłem tutaj podstawowy sposób obsługi formularzy w React.js. W kolejnym odcinku kursu porozmawiamy o formularzach niekontrolowanych. zapisz się na szkolenie z React.

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

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