Question

我正在开发一个使用注册页面和登录页面的项目。在开始造型之前，我能够正常输入字段。一旦我开始造型，我就会收到以下错误：

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

如果我在密码框中输入一个字母，它会显示在用户名字段下。看着屏幕，如果我输入字母＆＃34; H＆＃34;我在用户名字段下看到该字母而不是＆＃34; g。＆＃34;我发现错误标记的东西和/或错误的位置，我对样式进行的唯一编辑是在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

您使用名称username而非密码标记了第二个输入框，因此可能会出现错误值。

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

1 个答案: