Menambahkan penanganan aktivitas dan memperbarui status

  • 5 menit

Menyimpan status dalam komponen inti aplikasi kami (App) memungkinkan kami membaca nilai saat ini dari semua properti penting. Kita tidak perlu berinteraksi dengan setiap komponen. Kami juga dapat mempusatkan peristiwa, memastikan data dimodifikasi hanya di satu lokasi.

Skenario

Kami ingin mengizinkan pengguna aplikasi mengetuk item dalam daftar bahan saat mereka menyelesaikannya. Kita akan menandai item sebagai prepared dalam status. Pengaturan ini akan tercermin di seluruh aplikasi. Ketika nilai berubah, komponen mendeteksi pembaruan dan mengevaluasi ulang sesuai kebutuhan.

Menambahkan metode untuk peristiwa klik

  1. Buka file App.jsx.

  2. Buat pendengar peristiwa bernama ingredientClick. Tambahkan di bawah komentar yang berbunyi, TODO: Create ingredientClick event listener.

    function ingredientClick(index) {
    const updatedRecipe = { ... recipe };
    updatedRecipe.ingredients[index].prepared = !updatedRecipe.ingredients[index].prepared;
    setRecipe(updatedRecipe);
}

    Logika dimulai dengan membuat salinan recipe dengan menggunakan operator spread. Kami kemudian mengambil yang diperbarui ingredient dengan menggunakan index. Kami membalikkan nilai prepared. Terakhir, kita mengganti recipe objek dalam status dengan menggunakan setRecipe.

  3. Tambahkan IngredientList, komponen yang menampilkan bahan resep. Untuk melakukannya, tambahkan kode berikut setelah komentar yang berbunyi, TODO: Pass ingredients and event listener to IngredientList.

    <IngredientList ingredients={recipe.ingredients} onClick={ ingredientClick } />

    Perhatikan bahwa kita dapat meneruskan ingredientClick fungsi karena kita akan meneruskan prop lain ke komponen.

Memperbarui IngredientList untuk menggunakan pendengar peristiwa

Dalam React, properti (atau alat peraga) dapat berupa jenis JavaScript apa pun, termasuk fungsi. Jadi kita dapat menyiapkan penanganan aktivitas sebagai prop. Penyiapan ini memungkinkan kami untuk mempusatkan penanganan peristiwa.

Mari kita perbarui IngredientList untuk menggunakan ingredientClick fungsi yang kita buat sebelumnya:

  1. Buka file IngredientList.jsx. Perhatikan komponen yang ada. Kami akan menggunakan komponen ini untuk menunjukkan cara menggunakan peristiwa.

  2. Di bawah TODO: Add onClick event komentar, tambahkan JSX berikut.

    onClick={ () => props.onClick(index) }

    Perhatikan bahwa kita dapat meneruskan parameter ke onClick fungsi prop.

    Catatan

    Tidak ada alasan khusus kami menggunakan nama onClick pada komponen props. Itu hanya nama yang kami pilih. Ini diteruskan sebelumnya dari file App.jsx.

Menguji halaman

  1. Simpan semua file.
  2. Kembali ke browser dan refresh halaman. Jika Anda memilih bahan, status line-through akan berubah. Ini berubah karena prepared properti sedang diperbarui.