Languages
[Edit]
EN

React - onDoubleClick example (class component)

0 points
Created by:
Aisha
298

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) {
    super(props);
    this.handleDoubleClick = this.handleDoubleClick.bind(this);
  }
  handleDoubleClick = () => {
    console.log('handleDoubleClick catched');
  }
  render() {
    return (
      <div className="App">
        <button onDoubleClick={this.handleDoubleClick}>Click me</button>
      </div>
    );
  }
}

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

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

ReactJS

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.

❤️💻 🙂

Join