EN
React - onDoubleClick example (class component)
0
points
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
handleDoubleClickfunction toonDoubleClickproperty, 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.