时间戳

首页 > 解决方案 > React JS如何在输入字段中显示密码5秒然后隐藏？

javascript - React JS如何在输入字段中显示密码5秒然后隐藏？

问题描述

我有一个眼睛图标，它具有onClick更改密码可见性的事件。只需单击眼睛按钮即可轻松使其可见或不可见。我用useState它。但我只想显示密码 3 秒钟然后隐藏它。在这里，我面临一些麻烦。

const [showPassword, setShowPassword] = useState(false);

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

var time;

const handleShowPassword = () => {
    clearTimeout(time);
    setShowPassword(true);
    time = setTimeout(handleHidePassword, 3000);
};

实际上，这段代码有效，但有一个错误。如果我连续多次单击眼睛图标，密码会在 3000 毫秒后消失得更快。我知道问题是setTimeout每次点击后都没有刷新。我试图通过添加来解决这个问题，clearTimeout(time);但这没有帮助。

我是 JavaScript 新手，所以我期待收到一些可以理解的建议。

标签： javascripthtmlreactjs

解决方案

您可以添加去抖动以防止用户向按钮发送垃圾邮件。或者，您可以使单击按钮将“显示计时器”重置为 3000 毫秒：

const [showPasswordTime, setShowPasswordTime] = useState(0);
const showPassword = Date.now() < showPasswordTime;

// Little hack to trigger a re-render of your component
// (just need to set this with a value different from last render)
const [, forceUpdate] = useState();

console.log("Render", showPasswordTime - Date.now(), showPassword);

const handleHidePassword = () => {
    setShowPasswordTime(0);
};

const handleShowPassword = () => {
    // Make it that the password will be hidden for at least 3000ms
    setShowPasswordTime(Date.now() + 3000);
    // Make your component re-render after 3000ms
    // which will then check if `showPasswordTime` has passed or not.
    // (setTimeout will wait *at least* 3000ms)
    setTimeout(() => forceUpdate(Date.now()), 3000);
};

游乐场与示例

这样，您就不会在 3000 毫秒后“切换”可见性。您是说密码应该在（至少）接下来的 3000 毫秒内显示。你用setTimeoutwithforceUpdate告诉 React “在 3000 毫秒内重新渲染我的组件”来检查它。如果同时更改时间，它仍会保留显示的密码。

这种方法唯一的“坏”是如果您的用户在 3000 毫秒内多次按下按钮，您的组件将渲染多次，但这没关系。您应该假设您的组件可以随时重新渲染。

推荐阅读