LEKCJA 03 - REACT (p) - forms

1. formularze w React

Zwykłe formularze działają normalnie w React, jednak React preferuje tzw kontrolowane formularze.
Stan i wartości kontrolek są przechowane nie w nich samych tylko w obiekcie state i aktualizowane przez setState()

2. przykład z jednym inputem

class MyForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: '',
        };
    }

    // funkcja wykonywana na bieżąco przy wpisywaniu danych (lub strzałkowa, bez bind-a)

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

    //funkcja wykonywana przy wysłaniu formularza (lub strzałkowa, bez bind-a)

    handleSubmit(event) {
        this.setState({
            data: ""
        })
        //blokada przed wysłaniem formularza
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit} >
                <input type="text" value={this.state.data} onChange={this.handleChange} />
                <input type="submit" value="send" />
            </form>
        );
    }
}kopiuj

co ważne, walidacja zachodzi już na poziomie wpisywania danych, które można tu zmieniać:

handleChange(event) {
  this.setState({data: event.target.value.toUpperCase()});
}kopiuj

pamiętaj o this w ww funkcjach

3. select - dane z tablicy - przepływ danych parent -> child - > parent

zadanie - utwórz klasy MyForm i MySelect.
W formularzu wyrenderuj dwa razy MySelect.
elementy options utwórz w render() klasy MySelect za pomocą for-a lub map-a
i dodaj do selecta

dane trzymamy w state MyForm-a

array: [
    { id: 0, name: "hamlet" },
    { id: 1, name: "krzyzacy" },
    { id: 2, name: "lalka" }
],
array2: [
    { id: 0, name: "Kraków" },
    { id: 1, name: "Warszawa" },
    { id: 2, name: "Gdańsk" },
    { id: 3, name: "Toruń" }
]kopiuj

metoda render formularza


render() {
  return (
    <form>
        <MySelect />
        <MySelect />
    </form>
  );
}
kopiuj


przebieg pracy

- ustaw w klasie formularza dane z tablic w obiekcie state
- przekaż tablicę do komponentów MySelect, w dowolnie nazwanej property
- w klasie MySelect odczytaj tą property i zastosuj do utworzenia tablicy elementów <option>
- wewnątrz selecta w klasie MySelect utwórz zdarzenie onChange, obsługiwane np funkcją onSelectChange
- w funkcji onSelectChange zmieniaj state komponentu MySelect

- aby funkcja onSelectChange miała też wpływ na nadrzędny komponent czyli MyForm, trzeba do komponentu MySelect przekazać funkcję jako property (dzieje się tak ponieważ komunikacja w React przebiega parent -> child) i wywołać ją z MySelect
- tworzymy zatem i bindujemy funkcję w formularzu, np onHandleSelect, przekazujemy do property handleSelect:

<MySelect handleSelect={this.onHandleSelect} />kopiuj

- zadaniem onHandleSelect jest zmiana state w MyForm
- oczywiście należy przekazać do niej odpowiedni argument, czyli wybrane option

4. checkboxes list

klasy do utworzenia

MyForm
MyCheckboxkopiuj

tablica przechowywana w state komponentu MyForm:

array: [
   { checked: false, value: 1 },
   { checked: false, value: 2 },
   { checked: false, value: 3 },
   { checked: false, value: 10 },
   { checked: false, value: 20 },
]kopiuj

proponowana struktura checkboxa w komponencie MyCheckbox

<input
   type="checkbox"
   value="123"
   checked="false"
   onChange={this.onChangeCheckbox}
/>kopiuj

właściwości ładujemy z tablicy, podczas tworzenia listy checkboxów (for lub map)



odczyt właściwości checkboxa

event.target.value
event.target.checkedkopiuj

działanie

- można zaznaczyć dany MyCheckbox
- w jego state umieszczamy informację czy jest on zaznaczony
- na podstawie state zmieniamy tło komponentu oraz fifkę
- przy zaznaczeniu wywołujemy funkcję, która aktualizuje sumę (w state) w komponencie MyForm
- funkcja zostaje przekazana do MyCheckbox jako jego property
- suma jest wyświetlona w komponencie MyForm

5. Radios

proponuję wykonać dwa komponenty:

MyRadios
MyFormkopiuj

wygeneruj radios w ten sposób, aby zaznaczenie któregokolwiek zmieniało state w komponencie,
a wartość checked była ustawiana na true/false, kiedy zmieni się state

<input type="radio" value="option1" checked={this.state.selectedOption == 'option1'} />
<input type="radio" value="option2" checked={this.state.selectedOption == 'option2'} />kopiuj

każdy radio ma oczywiście dopisaną funkcję wykonywana przy zajściu zdarzenia onChange:

onChange={this.onOptionChange}kopiuj

funkcja ustawia state komponentu w którym generowane są inputy radio, na value zaznaczonego radio:

event.target.valuekopiuj