React点击按钮同时清空密码输入框与切换按钮文本如何实现？

解决方案 #

你已经给密码输入框绑定了password状态，只需要在触发按钮点击逻辑时，同步调用setPassword将状态置空即可，状态更新后输入框的内容会自动同步变化。

具体只需要修改login函数内的逻辑，代码如下：

const login = () => {
  // 原有逻辑保留
  setToggle(!toggle);
  // 新增这一行，同步把密码状态置空
  setPassword('');
}

其他可优化点 #

• 密码输入框建议把type属性改为password，避免输入内容明文显示
• 目前两个按钮都绑定了同一个login函数，退出登录按钮的逻辑会和修改密码按钮冲突，建议单独给退出登录写事件处理函数
• useState建议给初始值设为空字符串useState('')，避免组件挂载时出现非受控组件的警告
• 状态名toggle语义较弱，可以改成isEditingPassword这类更易懂的名称，提升代码可读性

修改后的完整代码参考：

import { useState } from "react";
import { useHistory } from "react-router";

const User = () => {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const [isEditingPassword, setIsEditingPassword] = useState(false);

    const history = useHistory();

    const handlePasswordToggle = () => {
        setIsEditingPassword(!isEditingPassword);
        setPassword('');
    }

    const handleLogout = () => {
        // 这里写退出登录的逻辑，比如清空用户信息、跳转到登录页等
        history.push('/login')
    }

    const login = () => {
        if (username === 'admin' && password === 'admin') {
             history.push('/home')
        } else {
            alert('wrong credentials')
        }
    }

    return (
        <>
            <div className="container">
                <label for="username">UserName:</label>
                <input
                    className="form-control"
                    type='text'
                    id="username"
                    name="username"
                    value={username}
                    onChange={(evt) => setUsername(evt.target.value)}
                />
                <br />

                <label for="password">Password:</label>
                <input
                    className="form-control"
                    type='password'
                    id="password"
                    name="password"
                    value={password}
                    onChange={(evt) => setPassword(evt.target.value)}
                />
                <button className="btn btn-primary mt-5 " onClick={handlePasswordToggle}>{isEditingPassword ? 'SavePassword' : ' change password '}</button>
                <button className="btn btn-primary mt-5  ml-5  pull-right" onClick={handleLogout}>Log out</button>

            </div>
        </>
    )

}
export default User;

内容的提问来源于stack exchange，提问作者mr.darkCoder