DE
React - onClick Beispiel (Klassenkomponente)
3 points
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 EigenschaftonClickübergibt, muss man sie im Konstruktor binden.
Lauffähiges Beispiel:
xxxxxxxxxx1
// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
class App extends React.Component {6
constructor(props) {7
super(props);8
this.handleClick = this.handleClick.bind(this);9
}10
handleClick = () => {11
console.log('handleClick angeklickt');12
}13
render() {14
return (15
<div className="App">16
<button onClick={this.handleClick}>Anklicken</button>17
</div>18
);19
}20
}21
22
const root = document.querySelector('#root');23
ReactDOM.render(<App />, root );Hinweis:
Die Lösung mit Funktionskomponenten kann man in diesem Artikel.