如何在反应性功能组件中从相同的JSX元素注册onClick和onDoubleClick事件？

Question

是否有一种正确的、已建立的方法来注册用户持久化的单次单击或双击Function组件中相同的JSX元素。在阅读了stackOverflow和youtube上的文章后，对于像我这样的初学者来说，最简单的解决方案是创建自定义钩子- useClickHook，并在setTimeout api中使用回调。在App中，我使用的是useEffect钩子，clickHook值在依赖项数组中。在第一次呈现其0时，在第一次单击= 1之后，如果doubleClick = 2；在useEffe-console.log()汇辑函数内调用If()语句。在我将clickHook值设置为默认0之后。

下面是我编写的代码(最小可重现性示例)

import { useState, useEffect } from 'react';

export const useClickHook = (detail) => {
    const [clickDetail, setClickDetail] = useState(0);

    useEffect(() => {
        const timer = setTimeout(() => {
            setClickDetail(detail)
        }, 200);
        
        return () => {
            clearTimeout(timer);
        }
    }, [detail]);

    return clickDetail;
}

import { useEffect, useState } from 'react';

import { useClickHook } from './ClickHook';

function App() {
  const [click, setClick] = useState(0);
  const clickHook = useClickHook(click);

  useEffect(() => {
    if (clickHook === 1) {
      console.log('single click')
    }

    if (clickHook === 2) {
      console.log('double click')
    }

    setClick(0);
  },[clickHook])

  return (
    <div className="App">
      Hello World
      <button
        onClick={(e) => {
          setClick(e.detail);
        }}
        onDoubleClick={(e) => {
          setClick(e.detail);
        }}
      >
        Click
      </button>
    </div>
  );
}

export default App;

如何改进？每一个建议都会很高兴的。

编辑！

因此，改进的一种方法是简单地从按钮JSX元素中删除onDoubleClick事件处理程序。以下代码可以安全删除

onDoubleClick={(e) => {
  setClick(e.detail);
}}

因此，在double click上setClick将只被调用两次，而不是像原来的示例那样调用3次，其余的调用将像以前一样由自定义钩子完成。

Answer 1

非常肯定，您已经可以在不需要特殊代码的情况下进行此操作。

这里的演示

export default function Demo() {
  const handleClick = (event) => {
    console.log(event.detail);
    switch (event.detail) {
      case 1: {
        console.log("single click");
        break;
      }
      case 2: {
        console.log("double click");
        break;
      }
      default: {
        break;
      }
    }
  };

  return (
    <div>
      <div>
        <button onClick={handleClick}>Double click</button>
      </div>
    </div>
  );
}