React - onDoubleClick example

In this article, we would like to show you how to use onDoubleClick event in React.

Quick solution:

xxxxxxxxxx

<button onDoubleClick={myFunction}>Click me</button>

In below example, we use handleDoubleClick arrow function with button's onDoubleClick property that handles double click event.

Runnable example:

xxxxxxxxxx

// Note: uncomment import lines in your React project.

// import React from react';

const handleDoubleClick = () => {

  console.log('onDoubleClick event handled!');

};

​

const App = () => {

  return (

    <div className="App">

      <button onDoubleClick={handleDoubleClick}>Click me</button>

    </div>

  );

};

​

const root = document.querySelector('#root');

ReactDOM.render(<App />, root );

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