7

Triple Clicks

When I’m in the development phase of a project, I like to tweak forms to fill in all fields with one triple click event over one another element (div or header usually), just to avoid filling all the individual inputs by hand one by one. I choose triple clicks because it’s more difficult to perform them by users by error.

React Events

In Javascript we can attach custom events over the React components on the application, as we have the onClick event and the onDoubleClick event, but i can't realize how to make with more clicks. In other words, how to emulate the onTripleClick() event.

Sample Code

render() {
    return (
        <FormComponent>

            <FormHeader
                onClick={this.doWhatever}
                onDoubleClick={this.doMore}
                onTripleClick={this.fillFormWithSampleData}
            >
                Create Promotion
            </FormHeader>

            {/* ... */}
            {/* ... */}
            {/* ... */}

            {/* Tons of things here */}

        </FormComponent>
    );
}

I was wondering if someone knows if there’s a native way to deal with this in React, as I don’t want to use third party libraries nor jQuery. Any ideas on how to do this?

Juan Rubio
  • 101
  • 1
  • 9

2 Answers2

13

Just check event detail:

class Test extends React.Component{
    onClick(e){
        console.log(e.detail === 3? "tripple click" : "not tripple click");
    }
    render(){
        return <div onClick={this.onClick}>click</div>;
    }
}
Daniel Cassidy
  • 24,676
  • 5
  • 41
  • 54
Andrii Starusiev
  • 7,564
  • 2
  • 28
  • 37
2

this is not an issue related to react, You can do it with javascript in general. You can listen to a 1 click event and check the event's details object (number of clicks followed).
Example: 

var trippleEl = document.getElementById('tripple');
trippleEl.addEventListener('click', function (e) {
    if (e.detail === 3) {
        console.log('3 times a charm');
    }
});
<h1 id="tripple">hi there</h1>
Sagiv b.g
  • 30,379
  • 9
  • 68
  • 99