观看：在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中文网其他相关文章！