Peralihan modal dalam ReactJS Tabler/Bootstrap

Question

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 或其他内容的情况下工作。但是 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.

Answer 1

Beginilah cara saya membetulkannya sekarang. Saya menggunakan useEffect dua kali, ini untuk mengelakkan "pertunjukan" kelas daripada ditambah pada masa yang sama dengan gaya display:block.

Untuk menutup modal, saya sebenarnya boleh menggunakan transitionend pendengar acara.

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
        
    );
}