React类组件基于this.state实现显示密码按钮的问题排查

问题描述 #

我是React新手，在实现登录页组件时遇到两个问题：

• 点击显示密码按钮后，密码输入框类型变为text以显示密码，但再次点击无法切换回password类型；
• 显示密码状态下点击登录按钮，请求payload中的密码值为空（不显示密码时正常）。
  因后端需求必须使用this.state实现（不能用userPassword变量，后者可正常工作），求解决办法。

原问题代码 #

class LoginPage extends Component
constructor(props){
        super(props);
        this.state ={
            email: '',
            password: '',
        }
        this.togglePassword = this.togglePassword.bind(this);
    }

togglePassword(e){
    this.setState({password:e.target.value});
}

render(){
return( <main>
...
    <Input placeholder="Type your password here" type={this.state.password ? "password" : "text"}
                value={this.state.password} onChange={this.togglePassword}/>
        <ShowPasswordButton value={this.state.password} onClick={this.togglePassword}>
        <FontAwesomeIcon icon={faUnlock} size="sm"/>
        </ShowPasswordButton>
...
</main>
);}

尝试修改按钮代码后，payload中的password值变为'text'：

<ShowPasswordButton type={this.state.password='text'} value={this.state.password} onClick={this.togglePassword}>

问题原因 #

核心问题是把输入框的密码值和显示状态共用了同一个state字段，导致状态混乱：

• togglePassword函数被输入框和按钮共用，点击按钮时会把按钮的value（或空值）覆盖真实的密码值；
• 用this.state.password判断输入框类型，当密码为空时会错误显示为text类型，点击按钮时又会覆盖密码值，最终导致payload为空。

解决方案 #

在state中新增专门控制密码显示状态的字段，将密码值和显示状态分开管理：

1. 修改state初始化

class LoginPage extends Component {
  constructor(props){
    super(props);
    this.state ={
      email: '',
      password: '',
      showPassword: false // 新增状态：控制密码是否显示
    }
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.togglePasswordVisibility = this.togglePasswordVisibility.bind(this);
  }
}

2. 拆分事件处理函数

• 单独处理密码输入内容变化：

handlePasswordChange(e) {
  this.setState({ password: e.target.value });
}

• 单独处理显示/隐藏密码的切换：

togglePasswordVisibility() {
  // 用prevState确保状态更新的准确性
  this.setState(prevState => ({ showPassword: !prevState.showPassword }));
}

3. 更新render中的输入框和按钮

render(){
  // 根据showPassword状态决定输入框类型
  const inputType = this.state.showPassword ? 'text' : 'password';
  return(
    <main>
      ...
      <Input 
        placeholder="Type your password here" 
        type={inputType}
        value={this.state.password} 
        onChange={this.handlePasswordChange}
      />
      <ShowPasswordButton onClick={this.togglePasswordVisibility}>
        {/* 根据显示状态切换图标 */}
        <FontAwesomeIcon icon={this.state.showPassword ? faLock : faUnlock} size="sm"/>
      </ShowPasswordButton>
      ...
    </main>
  );
}

方案说明 #

• 把password（存储真实密码值）和showPassword（控制显示状态）分开，避免状态冲突；
• 输入框和按钮的事件函数各司其职，不会互相干扰；
• 用showPassword直接判断输入框类型，逻辑清晰，不会因为密码为空导致类型判断错误；
• 点击按钮时不会修改password状态，因此无论密码是否显示，请求payload中的密码值都是用户输入的真实内容。

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