EN
React - onClick example
3 points
In this article, we would like to show you how to use onClick
event in React.
Quick solution:
xxxxxxxxxx
1
<button onClick={handleClick}>Click me</button>
In below example, we pass external handleClick
arrow function to the button's onClick
property that handles mouse click event.
Runnable example:
xxxxxxxxxx
1
// Note: Uncomment import lines while working with JSX Compiler.
2
// import React from 'react';
3
4
const handleClick = () => {
5
console.log('handleClick catched');
6
};
7
8
const App = () => {
9
return (
10
<div className="App">
11
<button onClick={handleClick}>Click me</button>
12
</div>
13
);
14
};
15
16
const root = document.querySelector('#root');
17
ReactDOM.render(<App />, root );
Note:
If you want the solution with class component read this article.