在React上点击三次作为事件？

Question

三次点击

当我处于项目的开发阶段时，我喜欢通过一个三击事件来调整表单以填充所有字段（通常是div或标题），只是为了避免逐个手工填写所有个别输入。我选择三次点击，因为错误地由用户执行它们更加困难。

反应事件

在Javascript中，我们可以在应用程序上的React组件上附加自定义事件，因为我们有onClick事件和onDoubleClick事件，但我无法实现如何使用更多点击。换句话说，如何模拟onTripleClick()事件。

示例代码

render() {
    return (
        <FormComponent>

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

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

            {/* Tons of things here */}

        </FormComponent>
    );
}

我想知道是否有人知道在React中是否存在本地方式来处理这个问题，因为我不想使用第三方库或jQuery。关于如何做到这一点的任何想法？

Answer 1

只需查看活动详情：

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>;
    }
}

Answer 2

这不是与反应有关的问题，你可以用javascript来做到这一点。 您可以收听1次点击事件并检查事件的详细信息对象（所遵循的点击次数） 例：

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>