如何在React中的同一個元素上使用onPress和onLongPress？

我有一個按鈕，我想根據按下的持續時間觸發不同的事情；因此，對于 1000 毫秒以下的短按進行一次回呼，對于超過 1000 毫秒的長按進行一次回呼。如果呼叫長按回呼，則不應呼叫短按回呼。

基于另一個用戶的長按解決方案（https://stackoverflow.com/a/54749871/11239421），我嘗試創建這個 React 鉤子：

import { useState, useEffect } from "react";

export default function useLongAndShortPress(
  longPressCallback = () => {
    console.log("Long press callback");
  },
  shortPressCallback = () => {
    console.log("Short press callback");
  },
  ms = 1000
) {
  const [startLongPress, setStartLongPress] = useState(false);
  const [startShortPress, setStartShortPress] = useState(false);

  useEffect(() => {
    let timerId: any;
    if (startLongPress) {
      timerId = setTimeout(longPressCallback, ms);
    } else if (startShortPress) {
      shortPressCallback();
      setStartShortPress(false);
    } else {
      clearTimeout(timerId);
    }

    return () => {
      clearTimeout(timerId);
    };
  }, [
    longPressCallback,
    shortPressCallback,
    ms,
    startLongPress,
    startShortPress,
  ]);

  return {
    onMouseDown: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onMouseUp: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onMouseLeave: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onTouchStart: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onTouchEnd: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onTouchCancel: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
  };
}

然后在組件中使用這個鉤子：

import useLongAndShortPress from './useLongAndShortPress';

function MyComponent (props) {
  const longAndShortPress = useLongAndShortPress(() => alert("LONG PRESS"), () => alert("SHORT PRESS"), 1000);

  return (
    <Page>
      <Button {...backspaceLongPress}>
        Click me
      </Button>
    </Page>
  );
};

這不起作用，因為從未觸發短按回呼，即使根本不按下按鈕，長按回呼似乎也會定期觸發。

有沒有更好的方法可以在同一個元素上同時進行長按和短按，或者有什么方法可以使我當前的解決方案發揮作用？非常感謝 ：）

uj5u.com熱心網友回復：

我設法讓它作業。我只更改了自定義鉤子，使其看起來像這樣：

import { useState, useEffect } from "react";

export default function useLongAndShortPress(
  longPressCallback = () => {
    console.log("Long press callback");
  },
  shortPressCallback = () => {
    console.log("Short press callback");
  },
  ms = 1000
) {
  const [startLongPress, setStartLongPress] = useState(false);
  const [startShortPress, setStartShortPress] = useState(false);

  useEffect(() => {
    let timerId: any;

    if (startLongPress) {
      timerId = setTimeout(() => {
        setStartShortPress(false);
        setStartLongPress(false);
        longPressCallback();
      }, ms);
    } else if (startShortPress) {
      setStartShortPress(false);
      shortPressCallback();

      clearTimeout(timerId);
    }

    return () => {
      clearTimeout(timerId);
    };
  }, [startLongPress, startShortPress]);

  return {
    onMouseLeave: () => {
      setStartLongPress(false);
    },
    onTouchStart: () => {
      setStartLongPress(true);
      setStartShortPress(true);
    },
    onTouchEnd: () => {
      setStartLongPress(false);
    },
  };
}

標籤：javascript 反应 按钮 计时器 设置超时

上一篇：如何在JavaFX中使用多個按鈕？

下一篇：如何檢查按鈕是否有效