我有一个 ReactJS 组件，我希望在单击和双击时有不同的行为。
我读了这个问题。
<Component
onClick={this.onSingleClick}
onDoubleClick={this.onDoubleClick} />
我自己尝试过，似乎您无法同时注册 ReactJS 组件的单击和双击。
我不确定这个问题有什么好的解决方案。我不想使用计时器，因为我的页面上将有 8 个这样的单个组件。
在这个内部有另一个内部组件来处理双击情况会是一个很好的解决方案吗？
编辑：
我试过这种方法，但它在渲染函数中不起作用。
render (
let props = {};
if (doubleClick) {
props.onDoubleClick = function
} else {
props.onClick = function
}
<Component
{...props} />
);
这是最快和最短的答案：
基于类的组件
let timer;
class DoubleClick extends React.Component {
onClickHandler = event => {
clearTimeout(timer);
if (event.detail === 1) {
timer = setTimeout(this.props.onClick, 200)
} else if (event.detail === 2) {
this.props.onDoubleClick()
}
}
render() {
return (
<div onClick={this.onClickHandler}>
{this.props.children}
</div>
)
}
}
功能部件
let timer;
const DoubleClick = ({ onClick = () => { }, onDoubleClick = () => { }, children }) => {
const onClickHandler = event => {
clearTimeout(timer);
if (event.detail === 1) {
timer = setTimeout(onClick, 200)
} else if (event.detail === 2) {
onDoubleClick()
}
}
return (
<div onClick={onClickHandler}>
{children}
</div>
)
}
演示
var timer;
function onClick(event) {
clearTimeout(timer);
if (event.detail === 1) {
timer = setTimeout(() => {
console.log("SINGLE CLICK");
}, 200)
} else if (event.detail === 2) {
console.log("DOUBLE CLICK");
}
}
document.querySelector(".demo").onclick = onClick;.demo {
padding: 20px 40px;
background-color: #eee;
user-select: none;
}<div class="demo">
Click OR Double Click Here
</div>我知道这是一个老问题，我只是一头雾水（没有测试代码，但我确信它应该可以工作）但也许这对某人有帮助。
render() {
let clicks = [];
let timeout;
function singleClick(event) {
alert("single click");
}
function doubleClick(event) {
alert("doubleClick");
}
function clickHandler(event) {
event.preventDefault();
clicks.push(new Date().getTime());
window.clearTimeout(timeout);
timeout = window.setTimeout(() => {
if (clicks.length > 1 && clicks[clicks.length - 1] - clicks[clicks.length - 2] < 250) {
doubleClick(event.target);
} else {
singleClick(event.target);
}
}, 250);
}
return (
<a onClick={clickHandler}>
click me
</a>
);
}
我将很快对此进行测试，以防万一更新或删除此答案。
缺点是毫无疑问，我们定义了250ms的“双击速度”，这是用户需要完成的，所以这不是一个很好的解决方案，可能会阻止一些人使用双击。
当然，单击只能在 250 毫秒的延迟下工作，否则不可能这样做，您必须以某种方式等待双击...
我一直在做的一个简单的例子。
文件： withSupportDoubleClick.js
let timer
let latestTouchTap = { time: 0, target: null }
export default function withSupportDoubleClick({ onDoubleClick = () => {}, onSingleClick = () => {} }, maxDelay = 300) {
return (event) => {
clearTimeout(timer)
const touchTap = { time: new Date().getTime(), target: event.currentTarget }
const isDoubleClick =
touchTap.target === latestTouchTap.target && touchTap.time - latestTouchTap.time < maxDelay
latestTouchTap = touchTap
timer = setTimeout(() => {
if (isDoubleClick) onDoubleClick(event)
else onSingleClick(event)
}, maxDelay)
}
}
文件： YourComponent.js
import React from 'react'
import withSupportDoubleClick from './withSupportDoubleClick'
export default const YourComponent = () => {
const handleClick = withSupportDoubleClick({
onDoubleClick: (e) => {
console.log('double click', e)
},
onSingleClick: (e) => {
console.log('single click', e)
},
})
return (
<div
className="cursor-pointer"
onClick={handleClick}
onTouchStart={handleClick}
tabIndex="0"
role="button"
aria-pressed="false"
>
Your content/button...
</div>
)
}
onTouchStart start 是当用户触摸元素时触发的触摸事件。这里的所有答案都过于复杂，您只需要使用e.detail：
<button onClick={e => {
if (e.detail === 1) handleClick();
if (e.detail === 2) handleDoubleClick();
}}>
Click me
</button>