如何在React中处理双击事件？

如何在 React 中处理双击事件？

要在 React 中处理双击事件：

• 将 onClick 事件添加到元素中。
• 使用事件对象的 detail 属性可以获取单击次数。
• 如果单击次数等于 2，则处理双击事件。

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

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

我们在按钮元素中添加了一个 onClick 事件，因此每次单击按钮时，都会调用 handleClick 函数。

事件对象上的详细信息属性提供单击事件的当前单击次数。

如果双击该按钮，switch 语句将运行案例 1 和案例 2 的代码。

仅判断双击事件

如果您不想处理任何其他情况，可以使用 If 语句判断 event.detail 是否等于 2。

export default function App() {
  const handleClick = event => {
    if (event.detail === 2) {
      console.log('double click');
    }
  };

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

handleClick 函数显式判断当前的点击次数是否等于 2。

如果只是需要处理双击事件，那么这个解决方案就足够了。