ロングニュースレンタルとは何ですか?

「長い記者会見」という言葉に慣れていない人が多いかもしれません.でも説明を聞いた瞬間にみんなが言うんだよあの~長いニュース活動とは、「タッチhold」とも呼ばれています.1つの要素を長押しするアクティビティ.私たちは通常、携帯電話からアプリケーションを削除するためにメニューを開いたり移動したりします.長押しの動作を長押しと言います.私たちがスマートフォンに詳しい人にとって、この活動に慣れていないはずがない.

一般的に、長時間クリック活動は携帯電話のアプリケーションアイコンのように、簡単にクリックしたときに他の機能があったり、よくクリックした要素に新しいイベントリスナーを加えたいときによく使われます.「下部プロジェクト」を行う場合は、コメントの削除/変更や通報の設定モードが必要です.携帯電話を使うためのネットアプリなので、コメント要素には必ず多くのタッチが出てくるので、成長時間の記者会見をすると、広告を出すことにしました.

実施方法

私たちは長パンチの基準を3秒に決めた.3秒以内にコメントをクリックするとそのコメントについて曖昧になり、その前に手を出せば曖昧にならない.
モードを有効にするためにsettimeout APIを使用してonTouchStartが3秒後に関数を実行することを予約した.また,出現パターンを避けるためにonTouchEnd発生時にcleartimeout APIを用いた.このプロセスでは,ターゲット要素とtimeout APIを記憶するためにuserefを用いた.
以上のコードは,長パンチイベントリスナー機能をcustom hookに変換したものである.

// useLongPress.ts
import React, { useCallback, useRef } from 'react';

const useLongPress = (
  onLongPress: () => void,
  { delay = 300 } = {},
) => {
  const timeout = useRef<NodeJS.Timeout>();
  const target = useRef<HTMLElement>();

  const start = useCallback(
    (event) => {
      if (event.target) {
        event.target.addEventListener('touchend', preventDefault, {
          passive: false,
        });
        target.current = event.target;
      }
      timeout.current = setTimeout(() => {
        onLongPress();
      }, delay);
    },
    [onLongPress],
  );

  const clear = useCallback(
    () => {
      if (timeout.current) clearTimeout(timeout.current);
      if (target.current) {
        target.current.removeEventListener('touchend', preventDefault);
      }
    },
    [],
  );

  return {
    onTouchStart: (e: React.TouchEvent) => start(e),
    onTouchEnd: () => clear(),
  };
};

const isTouchEvent = (event: TouchEvent) => 'touches' in event;

const preventDefault = (event: TouchEvent) => {
  if (!isTouchEvent(event)) return;

  if (event.touches.length < 2 && event.preventDefault) {
    event.preventDefault();
  }
};

// targetComponent.tsx
...
const { onMouseDown, onMouseLeave, onMouseUp, onTouchEnd, onTouchStart } =
    useLongPress(() => funtion());
...
<div
  onTouchEnd={onTouchEnd}
  onTouchStart={(e) => onTouchStart(e)}
>
  타겟 요소
</div>

整理する

機能だけで簡単に実現できると思っていたのですが、思ったより複雑でした.関連記事では言及していないが、複数のコメントのうちどれがあるコメントのために設計されたテンプレートであるかを確認するために、コメントデータを格納する機能を追加し、所望の機能を完成させた.これは熟考され、多くのエラーに遭遇して実現される機能の一つであり、非常に役に立ちます.