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