React JS 如何在輸入字段中顯示密碼 5 秒然后隱藏它？

Question

我有一個眼睛圖標，它具有更改密碼可見性的onClick事件。 只需單擊眼睛按鈕，即可輕松使其可見或不可見。 我useState使用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);來解決這個問題clearTimeout(time); 但這沒有幫助。

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

Answer 1

您可以添加去抖動以防止用戶向按鈕發送垃圾郵件。 或者，您可以通過單擊按鈕將“顯示計時器”重置為 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 毫秒內顯示密碼。 你使用setTimeout和forceUpdate來告訴 React “在forceUpdate內重新渲染我的組件”來檢查它。 如果在此期間更改了時間，它仍會保留顯示的密碼。

這種方法唯一“不好”的地方是，如果您的用戶在 3000 毫秒內多次按下按鈕，您的組件將渲染幾次太多，但沒關系。 您應該假設您的組件可以隨時重新渲染。