觀看：在React秒錶中添加膝蓋記錄儀

本教程將我們的React秒錶擴展到包括圈時正時功能，這是任何嚴重的計時應用程序的關鍵功能。 我們將利用反應狀態管理，陣列和有條件渲染的知識來實現​​這一目標。這是建築物的第3部分。

>

經常詢問的問題（常見問題解答）有關將LAP記錄添加到React sepwatch

>如何添加lap記錄到react秒錶？

>

添加膝蓋記錄需要由“膝蓋”按鈕觸發的功能。此功能捕獲了秒錶的當前時間，並將其添加到數組中。

掛鉤管理此數組。 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}`;
};

重置單圈時間

重置單圈時間涉及清除 array：>

laps確保准確的單圈時間

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

精度至關重要。 LAP日誌記錄函數應同步，以避免捕獲當前時間的延遲。

添加暫停功能

介紹一個狀態變量，以跟踪秒錶是否正在運行：

>

從暫停

恢復

保留暫停的當前時間；僅在完整重置期間重置它。

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

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

實現圈函數（上面已經覆蓋）

在刷新中持續持續的圈時間

>使用

來存儲單圈時間，即使在頁面刷新後也確保持久性：

響應式設計localStorage

>使用CSS媒體查詢來調整不同視口尺寸的佈局和尺寸：

const handleLap = () => {
  const newLaps = [...laps, currentTime];
  setLaps(newLaps);
  localStorage.setItem('laps', JSON.stringify(newLaps));
};

以上是觀看：在React秒錶中添加膝蓋記錄儀的詳細內容。更多資訊請關注PHP中文網其他相關文章！