Inputy w react

dokumentacja

Mamy dwie opcje jeśli chodzi o pracę z inputami - kontrolowane i niekontrolowane.

Niekontrolowane

W przypadku niekontrolowanych inputów mamy formularz z inputami i przy wysłaniu możemy coś z nimi zrobić. Może to być pożądana sytuacja, natomiast tracimy sporo kontroli nad zachowaniem inputów (np. możemy robić walidację w locie).

Kontrolowane

Natomiast gdy je kontrolujemy (tzw. ich wartość jest zapisana w stanie i z niego wynika) możemy na bieżąco reagować na zmiany w wartościach.

Ponadto, możemy sterować wartością inputów według naszych potrzeb np. uzupełnić formularz o dane ściągnięte z api.

Jak to się robi? - Musimy trzymać stan wartości inputa oraz w przypadku zmian jego wartości aktualizować stan.

state = {
    name: '',
  };

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

  render() {
    return <input id="dog-name-input" onChange={this.handleChange} value={this.state.name} />;
  }