ReactJS 中的模態轉換 Tabler/Bootstrap

Question

我正在使用一些 ReactJS 元件來建立 Tabler 儀表板。起初我使用普通的 HTML 頁面和 Jinja2 模板，但我開始為一些元件實作 ReactJS。

我不想使用太多第三方工具，例如react-tabler或bootstrap-tabler，因為它創建了很多我可能並不真正需要的額外套件。我已經能夠使用 ReactJS 元件建立一個漂亮的 Tabler 儀表板，而無需這些套件。

我現在遇到的唯一問題是顯示模態......現在這可以工作，但 CSS 轉換卻不起作用。至少一開始不是。我讓他們這樣工作：

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

問題是，我不太喜歡這個。感覺有點老套。

顯示模態效果很好，只需先加上style="display:block 屬性，然後加入show 類別。這樣我就可以在沒有太多額外JavaScript 或其他內容的情況下工作。但是display:block 必須設定首先，如果沒有，它們似乎是同時設置的，或者可能是display:block 稍後設置，所以你不會看到轉換。

我嘗試添加以下事件列表器 modalRef.current.addEventListener("transitionend", handleTransitionEnd);，但我想這只適用於實際轉換，而不適用於更改樣式。

有沒有比 100 毫秒超時更簡潔的方法？顯然，我無法在預設情況下添加 display:block ，因為這樣我的應用程式由於位於我的應用程式之上的透明模式而無法存取。

Answer 1

這就是我現在修復它的方法。我使用了兩次 useEffect，這是為了防止類別「show」與 display:block 樣式同時新增。

要關閉模態框，我實際上可以使用 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
        
    );
}