成人h动漫精品一区二区,高清毛片aaaaaaaaa片,97久久国产亚洲精品超碰热

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Saya sedang membina papan pemuka Tabler menggunakan beberapa komponen ReactJS. Pada mulanya saya menggunakan halaman HTML biasa dan templat Jinja2, tetapi saya mula melaksanakan ReactJS untuk beberapa komponen.

Saya tidak mahu menggunakan terlalu banyak alatan pihak ketiga seperti react-tabler atau bootstrap-tabler kerana ia menghasilkan banyak pakej tambahan yang mungkin saya tidak perlukan. Saya telah dapat mencipta papan pemuka Tabler yang cantik menggunakan komponen ReactJS tanpa memerlukan pakej ini.

Satu-satunya masalah yang saya hadapi sekarang ialah menunjukkan modal... Sekarang ini berfungsi, tetapi perubahan CSS tidak. Sekurang-kurangnya tidak pada mulanya. Saya membuat mereka berfungsi seperti ini:

// handle button click
const handleEditClick = (row) => {
    setIsModalOpen(true);
    modalRef.current.style.display = "block";

    // delay to make sure block is set first
    setTimeout(() => {
        modalRef.current.classList.add("show");
    }, 100);
};

Perkaranya, saya tidak begitu suka ini. Rasanya cliche sikit.

Tunjukkan modal berfungsi dengan baik, cuma tambah style="display:block 屬性，然后添加 show 類。這樣我就可以在沒有太多額外 JavaScript 或其他內(nèi)容的情況下工作。但是 display:block 必須設置首先，如果沒有，它們似乎是同時設置的，或者可能是 display:block dahulu dan tetapkan kemudian supaya anda tidak melihat peralihan.

Saya cuba menambah senarai acara berikut modalRef.current.addEventListener("transitionend", handleTransitionEnd); tetapi saya rasa ini hanya berfungsi untuk transformasi sebenar dan bukan untuk menukar gaya.

Adakah cara yang lebih bersih daripada tamat masa 100ms? Nampaknya saya tidak boleh menambah display:block secara lalai kerana kemudian apl saya tidak boleh diakses kerana mod ketelusan yang berada di atas apl saya.

const MyComponent = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [isButtonClicked, setIsButtonClicked] = useState(false); const modalRef = useRef(null); const [isStyleApplied, setIsStyleApplied] = useState(false); const [isClassApplied, setIsClassApplied] = useState(false); const handleEditClick = () => { setIsModalOpen(true); setIsButtonClicked(true); }; useEffect(() => { const applyStyle = () => { if (modalRef.current && !isStyleApplied && isButtonClicked) { modalRef.current.style.display = 'block'; setIsStyleApplied(true); } }; applyStyle(); }, [isButtonClicked, isStyleApplied]); useEffect(() => { const applyClass = () => { if (modalRef.current && isButtonClicked && isStyleApplied && !isClassApplied) { modalRef.current.classList.add('show'); setIsClassApplied(true); } }; applyClass(); }, [isButtonClicked, isStyleApplied, isClassApplied]); const handleCloseModal = () => { setIsModalOpen(false); modalRef.current.addEventListener("transitionend", handleTransitionEnd); modalRef.current.classList.remove("show"); function handleTransitionEnd() { modalRef.current.removeEventListener("transitionend", handleTransitionEnd); modalRef.current.style.display = "none"; } setIsButtonClicked(false); setIsStyleApplied(false); setIsClassApplied(false); }; return ( handleEditClick(row)} href="#">Open Modal ); }