Transitions modales dans ReactJS Tabler/Bootstrap

Question

Je construis un tableau de bord Tabler en utilisant certains composants ReactJS. Au début, j'utilisais des pages HTML normales et des modèles Jinja2, mais j'ai commencé à implémenter ReactJS pour certains composants. Je ne veux pas utiliser trop d'outils tiers comme React-Tabler ou Bootstrap-Tabler, car cela crée beaucoup de packages supplémentaires dont je n'ai probablement pas vraiment besoin. J'ai pu créer un magnifique tableau de bord Tabler à l'aide de composants ReactJS sans avoir besoin de ces packages. Le seul problème que j'ai maintenant est d'afficher le modal... maintenant

P粉274161593 · Answer

C'est ainsi que je le répare maintenant. J'ai utilisé useEffect deux fois, c'est pour éviter que la classe "show" soit ajoutée en même temps que le style display:block.

Pour fermer le modal, je peux en fait utiliser un écouteur d'événement transitionend.

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