Created
October 4, 2016 10:05
-
-
Save gabriel-dehan/0c0684cf5291584c3487904b5e0258c9 to your computer and use it in GitHub Desktop.
[React + Lodash] onClick and onDoubleClick events on the same element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var ReadTable = React.createClass({ | |
// ... | |
onClicked() { | |
// Array of debounced click events | |
this.debouncedClickEvents = this.debouncedClickEvents || []; | |
// Each click we store a debounce (a future execution scheduled in 250 milliseconds) | |
const callback = _.debounce(_ => { | |
// YOUR ON CLICKED CODE | |
this.debouncedClickEvents = []; | |
}, 500); | |
this.debouncedClickEvents.push(callback); | |
// We call the callback, which has been debounced (delayed) | |
callback(); | |
}, | |
onDoubleClicked() { | |
// If there were click events registered we cancel them | |
if (this.debouncedClickEvents.length > 0) { | |
_.map(this.debouncedClickEvents, (debounce) => debounce.cancel()); | |
this.debouncedClickEvents = []; | |
} | |
// YOUR DOUBLE CLICK CODE | |
}, | |
// ... | |
render() { | |
const table = this.props.table; | |
let tableStyle = this.getStyles(); | |
return ( | |
<li onClick={this.onClicked} onDoubleClick={this.onDoubleClicked}> | |
Click me | |
</li> | |
); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment