迹忆客 专注技术分享

在 React 中处理双击事件：

1. 向元素添加 onClick 属性。
2. 使用事件对象的 detail 属性来获取点击次数。
3. 如果点击次数等于 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 函数。

事件对象的 detail 属性提供了点击事件的当前点击计数。

如果双击按钮，switch 语句将运行 case 1 和 case 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。

如果只需要处理双击事件，这个解决方案应该足够了。