WATCH: Menambah Lap Logger ke jam randik React

Tutorial ini memanjangkan jam randik React kami untuk memasukkan fungsi masa lap - ciri penting untuk sebarang aplikasi masa yang serius. Kami akan memanfaatkan pengetahuan kami tentang pengurusan reaksi, tatasusunan, dan penyataan bersyarat untuk mencapai matlamat ini. Ini adalah bahagian 3 bangunan randik dalam siri React.

Soalan Lazim (Soalan Lazim) Mengenai Menambah Lap Pembalakan ke Jam Ringkasan React

bagaimana untuk menambah pembalakan lap ke jam randik reaksi?

Menambah pembalakan pusingan memerlukan fungsi yang dicetuskan oleh butang "pusingan". Fungsi ini menangkap masa semasa jam randik dan menambahkannya ke array. Hook

menguruskan array ini. useState

<code class="language-javascript">const [laps, setLaps] = useState([]);

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

memaparkan masa lap

paparan masa pusingan dengan pemetaan di atas array

, memberikan komponen untuk setiap pusingan: laps

<code class="language-javascript">{laps.map((lap, index) => (
  <p key="{index}">Lap {index + 1}: {lap}</p>
))}</code>

pemformatan masa pusingan

Meningkatkan kebolehbacaan dengan menukar milisaat ke minit, saat, dan milisaat menggunakan fungsi penolong:

<code class="language-javascript">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}`;
};</code>

menetapkan semula masa lap

menetapkan semula masa lap melibatkan membersihkan array

: laps

<code class="language-javascript">const handleReset = () => {
  setLaps([]);
  // ...reset stopwatch...
};</code>

Memastikan masa lap yang tepat

Ketepatan adalah yang paling utama. Fungsi pembalakan pusingan harus segerak untuk mengelakkan kelewatan dalam menangkap masa semasa.

Menambah fungsi jeda

Memperkenalkan pemboleh ubah keadaan untuk mengesan sama ada jam randik sedang berjalan:

<code class="language-javascript">const [isRunning, setIsRunning] = useState(false);

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

menyambung semula dari jeda

memelihara masa semasa ketika berhenti; hanya menetapkan semula semasa set semula penuh.

Melaksanakan fungsi lap (sudah dilindungi di atas)

Masa pusingan berterusan meregangkan

Gunakan

untuk menyimpan masa lap, memastikan kegigihan walaupun selepas halaman menyegarkan: localStorage

<code class="language-javascript">const handleLap = () => {
  const newLaps = [...laps, currentTime];
  setLaps(newLaps);
  localStorage.setItem('laps', JSON.stringify(newLaps));
};</code>

Reka bentuk responsif

Gunakan pertanyaan media CSS untuk menyesuaikan susun atur dan saiz untuk saiz viewport yang berbeza:

Atas ialah kandungan terperinci WATCH: Menambah Lap Logger ke jam randik React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!