Dalam react js, tidak boleh mendapatkan nilai butang apabila mengklik ikon di dalam butang

Question

Jadi saya cuba mendapatkan nilai daripada butang. Ini adalah butang saya:

<button
  className="toggle__btn"
  value={el._id}
  onClick={toggle}
>
     <i className="fa-solid fa-circle-info fs-4"></i>
</button>

Fungsinya adalah seperti berikut

const toggle = (event) => {
    const id = event.target.value;
    console.log(id);
  };

Masalahnya ialah saya tidak boleh mendapatkan nilai jika saya mengklik pada ikon, tetapi saya boleh apabila saya mengklik di luar ikon tetapi masih di dalam butang (ada ruang kosong di luar ikon). Saya mahu ia mengembalikan id walaupun apabila ikon diklik. Bagaimana untuk melakukannya? Kenapa ini berlaku?

Answer 1

Cubalah

const toggle = (event) => {
    const id = event.currentTarget.value;
    console.log(id);
};

Lihat inihttps://medium.com/@etherealm/currenttarget-vs-target-in-js-2f3fd3a543e5