代码之家  ›  专栏  ›  技术社区  ›  Tsardines

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

  •  0
  • Tsardines  · 技术社区  · 7 年前

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

    https://i.imgur.com/AGWz3r5.png

    如果我在密码框中键入字母,它会显示在用户名字段下。查看屏幕盖,如果我然后键入字母“H”,我会在用户名字段下看到该字母,而不是“g”。我发现有些东西标签错误和/或位置错误,我对样式所做的唯一编辑是在 render() 部分此外,用户名字段工作正常。

    这是索引。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;
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Daniel Lorenz    7 年前

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