javascript - (React) 密码输入字段一次显示一个字母

Question

我正在开发一个使用注册页面和登录页面的项目。在开始设计之前，我能够正常在字段中输入内容。一旦我开始设计样式，我就会收到以下错误:

/image/CWGHF.png

如果我在密码框中输入一个字母，它就会显示在用户名字段下。查看屏幕截图，如果我输入字母“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;

Answer 1

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