Javascript （React）密码输入字段一次显示一个字母

我正在做一个利用注册页面和登录页面的项目。在开始设计样式之前，我能够正常地在字段中键入内容。一旦我开始设计样式，就会出现以下错误：

如果我在密码框中键入字母，它将显示在用户名字段下。查看屏幕盖，如果我随后键入字母“H”，我会在用户名字段下看到该字母，而不是“g”。我发现有些东西标签错误和/或位置错误，我对样式所做的唯一编辑是在

render（）

部分下方。此外，用户名字段也可以正常工作

以下是index.js文件：

class Register extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        username: "",
        password: "",
        clickedRegister: false
      };
      this.handleInputChange = this.handleInputChange.bind(this);
      this.handleRegisterSubmit = this.handleRegisterSubmit.bind(this);
    }

    handleInputChange(evt) {
      console.log(evt.target);
      this.setState({
        [evt.target.name]: evt.target.value
      })
    };

    handleRegisterSubmit(evt) {
      evt.preventDefault();
      console.log('you clicked button');
      this.setState({
        clickedLogin: true
      })
    };

    render() {
      return (

      <form onSubmit={this.handleRegisterSubmit}>
        <div className="form">
          <h2 className="create-account">Create an account!</h2>

          <div className="form-group">
            <label className="user-label">
              <medium className="form-text">We'll never share your username with anyone else.</medium>
              <br />
            <input className="user-box"
              name="username"
              placeholder="Enter username"
              value={this.state.username}
              onChange={this.handleInputChange}
            />
            </label>
          </div>

          <div className="form-group">
            <label className="pass-label">
              <br />
            <input className="user-box"
              name="username"
              placeholder="Enter password"
              value={this.state.password}
              onChange={this.handleInputChange}
            />
            </label>
            <br />
            <button className="register-button">Submit</button>
          </div>

        </div>

      </form>
    )
  }
}

export default Register;

类寄存器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”，
clickedRegister:错误
};
this.handleInputChange=this.handleInputChange.bind（this）；
this.handleRegisterSubmit=this.handleRegisterSubmit.bind（this）；
}
handleInputChange（evt）{
console.log（evt.target）；
这是我的国家({
[evt.target.name]：evt.target.value
})
};
HandlerRegisterSubmit（evt）{
evt.preventDefault（）；
log（“您单击了按钮”）；
这是我的国家({
clickedLogin:true
})
};
render（）{
返回(
创建一个帐户！
我们永远不会与其他人共享您的用户名。






提交
)
}
}
导出默认寄存器；

您用用户名而不是密码标记了第二个输入框，因此可能得到了错误的值。

就是这样！下次我会更仔细地看我的代码。谢谢