EN
React - onDoubleClick example
3
points
In this article we would like to show you how to use onDoubleClick
event in React.
Quick solution:
<button onDoubleClick={myFunction}>Click me</button>
Practical example
In below example we use handleDoubleClick
arrow function with button's onDoubleClick
property that handles double click event.
App.js
file example:
// ONLINE-RUNNER:browser;
//Note: Uncomment import lines during working with JSX Compiler.
// import React from react';
const handleDoubleClick = () => {
console.log('handleDoubleClick catched');
};
const App = () => {
return (
<div className="App">
<button onDoubleClick={handleDoubleClick}>Click me</button>
</div>
);
};
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );
Browser output:

Hint: React has it's own
onDoubleClick
property to handle double click event that is equivalent ofdblclick
event that is used by pure JavaScript.