Bind both click and doubleClick events on a component simultaneously, and no longer trigger click events when double clicking.

click&doubleClick.jsx

import { Button, message } from "antd"

const ClickComp = (props) => {
  let clicks = 0
  let clickTimer = null
  let clickspan = 300
  const handleClick = () => {
    clicks++
    if (clicks === 1) {
      clickTimer = setTimeout(() => {
        clicks = 0
        message.info('click')
      }, clickspan);
    }
    if (clicks === 2) {
      clearTimeout(clickTimer)
      clicks = 0
    }
  }

  const handleDbClick = () => {
    message.info('dbclick')
  }
  return (
    <div>
      <Button onClick={handleClick} onDoubleClick={handleDbClick}>click</Button>
    </div>
  )
}

export default ClickComp