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. Kami akan menandai elemen sebagai prepared dalam status. Pengaturan ini akan tercermin di seluruh aplikasi. Ketika nilai berubah, komponen mendeteksi pembaruan dan melakukan reevaladasi sesuai kebutuhan.

Menambahkan metode untuk peristiwa klik

1. Buka file App.jsx.

2. Buat event listener 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 ingredient yang diperbarui dengan menggunakan index. Kami membalikkan nilai prepared. Terakhir, kita mengganti objek recipe 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 fungsi ingredientClick seperti meneruskan prop lain ke komponen.

Memperbarui IngredientList untuk menggunakan pendengar peristiwa

Di React, properti (atau props) dapat berupa jenis JavaScript apa pun, termasuk fungsi. Jadi kita dapat menyiapkan penanganan kejadian sebagai prop. Penyiapan ini memungkinkan kita untuk memusatkan penanganan kejadian.

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

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

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

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

   Perhatikan bahwa kita dapat meneruskan parameter ke fungsi prop onClick.

   Nota

   Tidak ada alasan khusus mengapa 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 harus berubah. Ini berubah karena properti prepared sedang diperbarui.