React - onDoubleClick example (class component)

0 points
Created by:

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

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

Note: Before we pass handleDoubleClick function to onDoubleClick property, we need to bind it in the constructor.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(props) {
    this.handleDoubleClick = this.handleDoubleClick.bind(this);
  handleDoubleClick = () => {
    console.log('handleDoubleClick catched');
  render() {
    return (
      <div className="App">
        <button onDoubleClick={this.handleDoubleClick}>Click me</button>

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

If you want the solution with functional component read this article.

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.


React - onDoubleClick example (class component)
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂