ウォッチ：ラップロガーをReact Stopwatchに追加します

このチュートリアルは、React Stopwatchを拡張して、LAPタイミング機能を含めるように拡張します。これは、深刻なタイムキーピングアプリケーションの重要な機能です。 これを達成するために、React状態管理、配列、条件付きレンダリングに関する知識を活用します。これは、反応シリーズのストップウォッチの建物のパート3です。 ラップロギングをReact Stopwatchに追加することについて、よく尋ねられる質問（FAQ）

ラップロギングをReact Stopwatchに追加する方法？

ラップロギングの追加には、「ラップ」ボタンでトリガーされる関数が必要です。この関数は、Stopwatchの現在の時間をキャプチャし、配列に追加します。 フックはこの配列を管理します ラップタイムの表示

配列をマッピングしてラップタイムを表示し、各ラップのコンポーネントをレンダリングします：useState

ラップタイムのフォーマット

const [laps, setLaps] = useState([]);

const handleLap = () => {
  setLaps([...laps, currentTime]);
};

ヘルパー関数を使用して、ミリ秒を数分、秒、およびミリ秒に変換することにより、読みやすさを改善します：

ラップタイムのリセットlaps

{laps.map((lap, index) => (
  <p key={index}>Lap {index + 1}: {lap}</p>
))}

ラップタイムのリセットには、

配列のクリア：

が含まれます

正確なラップタイムを確保する

const formatTime = (time) => {
  const minutes = Math.floor(time / 60000);
  const seconds = Math.floor((time - minutes * 60000) / 1000);
  const milliseconds = time - minutes * 60000 - seconds * 1000;
  return `${minutes}:${seconds}:${milliseconds}`;
};

精度が最重要です。ラップロギング機能は、現在の時間をキャプチャする際の遅延を避けるために同期する必要があります。

一時停止機能の追加

lapsSTOPWATCHが実行されているかどうかを追跡するために状態変数を導入してください：

const handleReset = () => {
  setLaps([]);
  // ...reset stopwatch...
};

一時停止から再開

一時停止時に現在の時間を保存します。フルリセット中にのみリセットします。

LAP機能の実装（既に上にカバーされています）

リフレッシュ全体のラップタイムを持続する

const [isRunning, setIsRunning] = useState(false);

// ...in the time increment function...
if (isRunning) {
  // ...increment time...
}

を使用してラップタイムを保存し、ページの更新後でも持続性を確保する：

レスポンシブデザイン

CSSメディアクエリを使用して、さまざまなビューポートサイズのレイアウトとサイジングを調整します。

以上がウォッチ：ラップロガーをReact Stopwatchに追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。