javascript - 三次点击作为 React 上的事件？

Question

三次点击

当我处于项目的开发阶段时，我喜欢调整表单以通过一个三次单击事件在另一个元素(通常是 div 或标题)上填充所有字段，只是为了避免手动填写所有单独的输入。我选择三次点击，因为它更难被用户错误地执行。

react 事件

在 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 中是否有处理此问题的 native 方法，因为我不想使用第三方库或 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>;
    }
}