使用MUI开发登录页，email/password状态无法重置为空字符串

核心原因 #

你的InputMaterial组件仅通过onChange更新状态，但未绑定value属性，导致输入框属于不受控组件——组件内部独立维护输入值，与React state完全脱节。因此调用setEmail("")和setPassword("")时，state确实会更新，但输入框不会同步变化。

修复步骤 #

1. 绑定value属性：给两个输入框添加value属性，将输入值与React state绑定，转为受控组件，确保状态更新时输入框同步刷新
2. 修正密码显示逻辑：当前密码输入框的type判断写反了，showPassword为true时应显示明文（type='text'），为false时隐藏（type='password'）

修改后的完整代码 #

const Login = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [showPassword, setShowPassword] = useState(false);
    const [errEmail, setErrEmail] = useState("");
    const [errPassword, setErrPassword] = useState("");
    const [checkErrEmail, setCheckErrEmail] = useState(false);
    const [checkErrPassword, setCheckErrPassword] = useState(false);

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

    const onSubmitLogin = (event) => {
        event.preventDefault();
        const userLogin = { email, password };
        loginApi(userLogin);
    }

    // 优化async/await写法，避免混用then/catch
    const loginApi = async (body) => {
        try {
            const res = await axios.post(`${BASE_URL}/login`, body);
            console.log(res.data);
            // 重置所有状态
            setEmail("");
            setPassword("");
            setErrEmail("");
            setErrPassword("");
            setCheckErrEmail(false);
            setCheckErrPassword(false);
        } catch (err) {
            const errorMsg = err.response.data.message;
            console.log(errorMsg);
            if (errorMsg.includes('Senha incorreta')) {
                setErrPassword(errorMsg);
                setCheckErrPassword(true);
            } else {
                setErrEmail(errorMsg);
                setCheckErrEmail(true);
            }
        }
    }

    return (
        <Main>
            <p>Entrar</p>
            <Form onSubmit={onSubmitLogin}>
                <InputMaterial 
                    error={checkErrEmail}
                    helperText={checkErrEmail ? errEmail : ''}
                    id="outlined-basic"
                    label="Email"
                    type={'email'}
                    variant="outlined" 
                    placeholder={'Email'}
                    onChange={(event)=>setEmail(event.target.value)}
                    value={email} {/* 新增：绑定state到输入框 */}
                    required
                />

                <DivPassword>
                    <InputMaterial 
                        error={checkErrPassword}
                        helperText={checkErrPassword ? errPassword : ''}
                        id="outlined-basic" 
                        label="Password"
                        type={showPassword ? 'text' : 'password'} {/* 修正显示逻辑 */}
                        variant="outlined"
                        placeholder={'Mínimo 6 caracteres'}
                        inputProps={{pattern:'.{6,}', title:'Mínimo 6 caracteres'}}
                        onChange={(event)=>setPassword(event.target.value)}
                        value={password} {/* 新增：绑定state到输入框 */}
                        required
                    />
                    <IconButton
                        aria-label="toggle password visibility"
                        onClick={handleClickShowPassword}
                        edge="end"
                    >
                        { showPassword ? <VisibilityOff /> : <Visibility />}
                    </IconButton>
                </DivPassword>

                <ButtonStyled type='submit'>Entrar</ButtonStyled>
            </Form>
        </Main>
    )
}
export default Login

额外说明 #

• 受控组件是React表单的标准实现方式，能确保输入框值与state完全同步，状态更新后输入框会自动响应
• 优化了loginApi的异步写法，用try/catch替代then/catch，代码结构更简洁易读

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