React自定义弹窗多次点击异常：如何实现点击延长显示时长？

你的问题核心是每次点击都会创建新的定时器，旧的定时器没有被清除，到期后依然会执行隐藏操作，导致弹窗出现频繁闪灭或者提前消失的情况。要实现「点击按钮时重置弹窗倒计时，保持弹窗显示直到最后一次点击后3秒再隐藏」的效果，可以通过以下方式解决：

解决方案：用useRef保存定时器ID，每次点击清除旧定时器 #

我们可以使用useRef来存储定时器的ID，这样每次点击按钮时，先清除之前未执行的定时器，再创建新的定时器，确保只有最新的倒计时生效。

修改后的完整代码 #

import { useState, useRef } from 'react';

function CustomButton({ onClick }) {
    return (
        <button onClick={onClick}>
            I am a button
        </button>
    )
}

function MyPopUp({ popupVis, popupText }) {
    return (
        <div style={{ visibility: popupVis }}>
            {popupText}
        </div>
    )
}

export default function MyContent() {
    const [popupVis, setPopupVis] = useState('hidden');
    const [popupText, setPopupText] = useState('');
    // 用useRef存储定时器ID
    const timerRef = useRef(null);

    const handlePopupTrigger = () => {
        const popupText = "Dynamic string";
        // 先清除之前的定时器，避免旧定时器触发隐藏
        if (timerRef.current) {
            clearTimeout(timerRef.current);
        }
        // 设置弹窗内容和可见状态
        setPopupText(popupText);
        setPopupVis("visible");
        // 创建新的定时器，3秒后隐藏弹窗
        timerRef.current = setTimeout(() => {
            setPopupVis("hidden");
        }, 3000);
    };

    return (
        <>
            <CustomButton onClick={handlePopupTrigger} />
            <MyPopUp popupVis={popupVis} popupText={popupText} />
        </>
    )
}

关键改动说明 #

• 用useRef存储定时器ID：useRef的.current属性可以保存可变值，且不会触发组件重渲染，非常适合存储定时器ID这类不需要参与渲染的变量。
• 每次点击先清除旧定时器：在设置新的弹窗状态前，调用clearTimeout(timerRef.current)，确保之前创建的定时器不会再执行隐藏操作。
• 整合逻辑到主组件：把弹窗触发逻辑放到MyContent组件内，避免向子组件传递多个状态 setter，让代码更简洁易维护。

这样修改后，无论你点击按钮多少次，弹窗都会在最后一次点击后的3秒才会自动隐藏，完全解决了频繁闪灭的问题。

内容的提问来源于stack exchange，提问作者chan4est