Menu
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.
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.
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?
942
The first way to perform multiple onClick events in React is to write your logic in a single function, and then call that function inside of the onClick event handler. What is this? To learn more about the onClick event handler in React, check out my tutorial on React onClick Event Handling with Examples.
React events are written in camelCase syntax: onClick instead of onclick . React event handlers are written inside curly braces: onClick={shoot} instead of onClick="shoot()" .
Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.
The examples of the synthetic events are onClick(), onBlur() and onChange(). These all are not real DOM events but react synthetic events.
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>;
}
}
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
