Klik butang dalam demo React saya tidak bertindak balas

Question

Mengapa tiada jawapan selepas mengklik butang?

Kod sampel saya: https://codesandbox.io/s/gallant-knuth-kwf55c

Saya menyemak kod saya dan mendapati tiada masalah.

Answer 1

Sebabnya kerana semua elemen disediakan menggunakan position:absolute, div kandungan bertindih dengan pengepala.

Ini menyebabkan pengepala disembunyikan pada interaksi. Jadi apabila kita mengklik, acara klik sebenarnya dicetuskan pada kandungan, bukan butang (lihat di bawah).

Kita boleh ambil kaedah berikut:

• Sama ada alih keluar kedudukan:mutlak daripada DIV
• Kira ketinggian kandungan menggunakan CSS unit viewport/calcfungsi untuk mengelakkan pertindihan dengan pengaki