React - onClick Beispiel (Klassenkomponente)

In diesem Artikel wird gezeigt, wie man das onClick-Ereignis in React verwenden kann. 

Im folgenden Beispiel wird die Pfeilfunktion handleClick an die Eigenschaft onClick der Schaltfläche, die das Mausklick-Ereignis behandelt.

Hinweis: Bevor man die handleClick-Funktion an die Eigenschaft onClick übergibt, muss man sie im Konstruktor binden.

Lauffähiges Beispiel:

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren:
// import React from 'react';
// import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick = () => {
    console.log('handleClick angeklickt');
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Anklicken</button>
      </div>
    );
  }
}

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Hinweis:
Die Lösung mit Funktionskomponenten kann man in diesem Artikel.