Tengo un botón que quiero activar diferentes cosas dependiendo de la duración de la presión; así que una devolución de llamada para pulsaciones cortas de menos de 1000 ms y otra devolución de llamada para pulsaciones largas de más de 1000 ms. La devolución de llamada de pulsación corta no debe llamarse si se llama la devolución de llamada de pulsación larga.

Sobre la base de la solución de otro usuario solo para una pulsación prolongada ( https://stackoverflow.com/a/54749871/11239421 ), intenté crear este enlace 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); }, }; }

y luego use este gancho en un componente:

 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> ); };

Esto no funciona, ya que la devolución de llamada de pulsación corta nunca se activa, y la devolución de llamada de pulsación larga parece activarse periódicamente incluso cuando no se presiona el botón en absoluto.

¿Hay una mejor manera de obtener pulsaciones largas y cortas en el mismo elemento, o hay alguna forma de hacer que mi solución actual funcione? Muchísimas gracias :)