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

Question

三次点击

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

反应事件

在 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

这不是与 React 相关的问题，您通常可以使用 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>

Answer 2

只需查看活动详情：

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

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

Triple click as events on React?

javascript

events

interaction

click

reactjs

三次点击

反应事件

示例代码