Definiowanie metod

Podobnie jak stan początkowy metodę definiujemy przez określenie jej nazwy i przypisanie do niej funkcji. W ramach metody mamy dostęp do całego komponentu (całej klasy), zatem przy użyciu this możemy odwoływać się do stanu, innych metod oraz do setState

Dodajmy metodę do zwiększania ilości kliknięć.

class App extends React.Component {
  state = {
    counter: 0,
  };

  incrementCounter = () => {
    this.setState({ counter: this.state.counter + 1 });
  };

  render() {
    // reszta
  }
}

By z niej skorzystać przekażmy ją do nasłuchiwacza na kliknięcie w odpowiednim przycisku

<button onClick={this.incrementCounter}>Dodaj 1</button>

Do onClick musimy przekazać callback(funkcję do wywołania). Jako że nie potrzebujemy nic dodatkowo wywoływać/przekazywać, możemy po prostu wpisać tylko referencję do funkcji.

Zwróćcie uwagę, że schowaliśmy mechanikę tego co się dzieje z miejsca gdzie definiujemy jak coś wygląda. Jest to zwłaszcza przydatne jak mamy duże rzeczy i nie martwimy się co się kryje pod handleUserRegistration.