Bagaimanakah Saya Boleh Mengesan Klik Di Luar Komponen Reaksi?

Kesan Klik Di Luar Komponen Reaksi

Senario yang ditimbulkan melibatkan pengesanan peristiwa klik yang berlaku di luar komponen tertentu. Kaedah terdekat() jQuery biasanya menyemak sama ada sasaran acara klik mempunyai elemen DOM komponen sebagai induk, menunjukkan klik dalam komponen.

Pelaksanaan ES6

Yang disediakan Penyelesaian ES6 menggunakan cangkuk useOutsideAlerter, yang mengambil rujukan sebagai hujah. Dalam cangkuk, pengendali klik ditambahkan pada dokumen. Apabila klik berlaku, sasaran disemak terhadap elemen semasa ref. Jika sasaran tidak terkandung dalam komponen, amaran dipaparkan.

Komponen OutsideAlerter membungkus kandungan kanak-kanak dan menggunakan cangkuk pada ref bekasnya. Apabila diklik di luar bekas, makluman akan dicetuskan.

Pelaksanaan Berasaskan Kelas (Selepas Reaksi 16.3)

Dalam pelaksanaan ini, komponen OutsideAlerter memanjangkan Komponen dan mentakrifkan kitaran hayat kaedah. Kaedah componentDidMount dan componentWillUnmount masing-masing menambah dan mengalih keluar pengendali klik daripada dokumen. Kaedah handleClickOutside menyemak klik di luar komponen, memaparkan amaran jika perlu.

Pelaksanaan Berasaskan Kelas (Sebelum React 16.3)

Pendekatan yang sedikit berbeza digunakan sebelum ini untuk Bertindak balas 16.3. Komponen mempunyai kaedah setWrapperRef yang menetapkan ref pembalut. Kaedah handleClickOutside menyemak klik di luar komponen, memaparkan amaran jika perlu.

Tidak kira pelaksanaannya, penyelesaian ini membenarkan pengesanan peristiwa klik di luar komponen React tertentu, memberikan kawalan yang dipertingkatkan ke atas interaksi pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Klik Di Luar Komponen Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!