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 ada sekarang ialah memaparkan modal... sekarang

P粉274161593 · Answer

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