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