跳到主要内容

useLongPress

跟踪长按的 React Hook

Usage​

实时编辑器

function Demo() {
  const [state, setState] = useState("No Press");
  const onLongPress = () => {
    setState("Long Pressed!");
  };

  const defaultOptions = {
    isPreventDefault: true,
    delay: 300,
  };
  const longPressEvent = useLongPress(onLongPress, defaultOptions);

  return (
    <div>
      <button {...longPressEvent}>useLongPress</button>
      <button onClick={() => setState("No Press")}>Reset</button>
      <div>Pressed: {state}</div>
    </div>
  );
};
结果
Loading...

API​

useLongPress​

Returns​

{ readonly onMouseDown: (e: any) => void; readonly onTouchStart: (e: any) => void; readonly onMouseUp: () => void; readonly onMouseLeave: () => void; readonly onTouchEnd: () => void; }: 包含以下元素的对象：

  • onMouseDown 鼠标按下事件。
  • onTouchStart 手指按下事件。
  • onMouseUp 鼠标松开事件。
  • onMouseLeave 鼠标离开事件
  • onTouchEnd 手指松开事件

Arguments​

参数名描述类型默认值
callback回调(e: MouseEvent | TouchEvent) => void (必填)-
options可选参数UseLongPressOptions | undefined-

UseLongPressOptions​

参数名描述类型默认值
isPreventDefault阻止默认事件booleantrue
delay延迟number300