不知道是什么导致我的ReactJS项目中的输入错误

Question

我正在用ReactJS构建一个个人项目。目前，我正在尝试模拟类似于Google的多步登录组件。我的问题是，当我在电子邮件输入中键入数据并单击“下一步”时，数据将被复制到有条件呈现的密码输入中。为了清晰起见，以下是一些图片： when I type anything into this field ，然后单击下一步， the password input gets filled with the email input's data。

这是我的组件代码，导入已被省略：

 constructor(props) {
    super(props);

    this.state = {
      emailIsValid: false,
      passwordIsValid: false
    };
  }

这些用于跟踪登录步骤的方法请记住，这些方法是不完整的，会向API发出http请求以进行验证：

  verifyEmail = () => {
    this.setState({
      emailIsValid: !this.state.emailIsValid
    });
  };

 loginUser = () => {};

这是render方法，我做了条件语句来显示/隐藏电子邮件和密码输入：

render() {
    return (
      <div className="login-container">
        <div className="login-panel">
          <div className="logo">Matshop</div>
          <form>
            {!this.state.emailIsValid ? (
              <div>
                <label htmlFor="email">Email</label>
                <input
                  type="email"
                  name="email"
                  placeholder="brucewayne@gmail.com"
                />
                <a href="/"> Forgot your email?</a>
              </div>
            ) : (
              <div>
                <label htmlFor="password">Password</label>
                <input type="password" name="password" />
                <a href="/"> Forgot your password?</a>
              </div>
            )}
          </form>

          <div className="login-footer">
            {!this.state.emailIsValid ? (
              <div className="login-buttons">
                <button onClick={this.verifyEmail}>Next</button>
              </div>
            ) : (
              <div className="login-buttons">
                <button className="back-btn" onClick={this.verifyEmail}>
                  Back
                </button>
                <button onClick={this.loginUser}>Login</button>
              </div>
            )}
            <p>
              Need an account?<a href="/Register"> click here</a>
            </p>
          </div>
        </div>
      </div>
    );
  }