React如何实现点击显示密码3秒后自动隐藏 修复多次点击提前隐藏Bug

修复方案 #

问题原因 #

你的代码核心问题出在存储定时器ID的time变量是普通函数变量，React组件每次因为状态更新重渲染时，这个变量都会被重置，之前存的定时器ID会直接丢失，导致后续的clearTimeout根本无法清除之前已经创建的定时器，多个定时器同时运行就会出现密码提前隐藏的问题。

修复代码 #

用React内置的useRef存储定时器ID即可，useRef的存储值在组件整个生命周期内不会因为重渲染丢失：

import { useState, useRef } from 'react';

// 组件内部逻辑
const [showPassword, setShowPassword] = useState(false);
// 用ref持久化存储定时器ID
const timerRef = useRef(null);

const handleHidePassword = () => {
    setShowPassword(false);
};

const handleClickEye = () => {
    // 每次点击先清空之前的定时器
    if (timerRef.current) {
        clearTimeout(timerRef.current);
    }
    const willShow = !showPassword;
    setShowPassword(willShow);
    // 切换为显示状态时启动3秒倒计时
    if (willShow) {
        timerRef.current = setTimeout(handleHidePassword, 3000);
    }
};

使用说明 #

把眼睛图标的onClick事件绑定到handleClickEye即可，该实现满足以下交互：

• 单次点击图标：密码显示3秒后自动隐藏
• 连续多次点击图标：每次点击都会重置3秒倒计时，最后一次点击后满3秒才会隐藏
• 如果当前是显示状态时点击，会直接切换为隐藏状态，符合常规密码框交互习惯

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