React中密码显示/隐藏眼睛图标点击失效问题排查

你的代码存在三个核心问题： #

• 状态变量滥用：用同一个password变量同时存储密码可见状态（布尔值）和输入框的密码内容（字符串），导致状态逻辑彻底混乱
• 函数名拼写错误：hendleClick应为handleClick
• 类型判断逻辑颠倒：当前password为true时输入框类型是password（隐藏密码），和预期的“显示眼睛图标时可见密码”逻辑相反

修正后的代码： #

import React, { useState } from 'react';
import Eye from './Eye';
import EyeOff from './EyeOff';

function App(){
    // 拆分状态：一个存密码可见状态，一个存输入框内容
    const [showPassword, setShowPassword] = useState(false);
    const [passwordValue, setPasswordValue] = useState('');

    const handleClick = () => {
        setShowPassword(!showPassword);
    }

    return(
        <>
            {/* 输入框类型根据showPassword切换，onChange更新密码内容 */}
            <input 
                type={showPassword ? 'text' : 'password'} 
                value={passwordValue}
                onChange={(e) => setPasswordValue(e.target.value)} 
            />
            {/* 图标切换逻辑：显示密码时展示EyeOff，隐藏时展示Eye */}
            {showPassword ? <EyeOff onClick={handleClick} /> : <Eye onClick={handleClick} />}
        </>
    )
}
export default App;

修正说明： #

1. 拆分状态变量，把显示状态和密码内容分开管理，避免逻辑冲突
2. 修复点击函数的拼写错误
3. 调整输入框类型的判断逻辑，让showPassword为true时输入框显示为text（可见密码），同时对应显示关闭眼睛的图标（EyeOff），符合用户常规认知
4. 给输入框加上value属性，绑定passwordValue，保证受控组件的状态一致性

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