events - 双击并单击 ReactJS 组件

Question

我有一个 ReactJS 组件，我希望它在单击和双击时具有不同的行为。

我读到this问题。

<Component
    onClick={this.onSingleClick}
    onDoubleClick={this.onDoubleClick} />

我自己尝试过，似乎无法在 ReactJS 组件上同时注册单击和双击。

我不确定这个问题有什么好的解决方案。我不想使用计时器，因为我的页面上将有 8 个这样的单个组件。

在这个组件中添加另一个内部组件来处理双击情况是一个很好的解决方案吗？

编辑:

我尝试了这种方法，但它在渲染函数中不起作用。

render (

    let props = {};

    if (doubleClick) {
        props.onDoubleClick = function
    } else {
        props.onClick = function
    }
    <Component
        {...props} />
);

Answer 1

这是最快和最短答案:

基于类的组件

class DoubleClick extends React.Component {
    timer = null

    onClickHandler = event => {
        clearTimeout(this.timer);

        if (event.detail === 1) {
            this.timer = setTimeout(this.props.onClick, 200)
        } else if (event.detail === 2) {
            this.props.onDoubleClick()
        }
    }

    render() {
        return (
            <div onClick={this.onClickHandler}>
                {this.props.children}
            </div>
        )
    }
}

功能组件

const DoubleClick = ({ onClick = () => { }, onDoubleClick = () => { }, children }) => {
    const timer = useRef()

    const onClickHandler = event => {
        clearTimeout(timer.current);

        if (event.detail === 1) {
            timer.current = 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>