React类组件登录点击校验凭证功能的完整语法实现求助

你需要新增3部分逻辑完成需求：

• 给state新增错误提示字段，用来存储校验失败后的提示信息
• 新增独立的登录校验方法，在方法内完成凭证匹配和后续跳转/报错逻辑
• 页面渲染错误提示节点，替换原有按钮的直接跳转逻辑

constructor (props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      error: '' // 新增错误提示字段
    }
  }

  handleUserInput = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name]: value})
  }

  // 新增登录校验方法
  handleLogin = () => {
    // 定义预设的合法用户凭证
    const validUser = {
      username: 'gerasimos',
      password: '27111980'
    }
    // 匹配表单输入和合法凭证：此处表单的email字段对应预设的username字段
    if (this.state.email === validUser.username && this.state.password === validUser.password) {
      // 校验通过跳转首页
      this.props.onRouteChange('home')
      // 跳转前可选择清空错误
      this.setState({error: ''})
    } else {
      // 校验失败设置错误提示
      this.setState({error: '用户名或密码输入错误，请重新输入'})
    }
  }

  render () {
    return (
    <article className="br2 ba dark-gray b--black-30 mv6 w-100 w-50-m w-25-l mw5 center">
      <main className="pa4 black-80">
        <div className="measure center">
          <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
            <legend className="f4 fw6 ph0 mh0">Log In</legend>
            {/* 新增错误提示渲染节点 */}
            {this.state.error && <p className="f6 red mb2">{this.state.error}</p>}
            <div className="mt3">
              <label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
              <input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" 
                type="email" 
                name="email" 
                id="email-address"
                placeholder="Email"
                value={this.state.email}
                onChange={this.handleUserInput}  
              />
            </div>
            <div className="mv3">
              <label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
              <input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" 
                type="password" 
                name="password"  
                id="password"
                placeholder="Password"
                value={this.state.password}
                onChange={this.handleUserInput}
              />
            </div>
          </fieldset>
          <div className="">
            <input  
              onClick={this.handleLogin} // 替换原有直接跳转逻辑，绑定校验方法
              className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
              type="submit" 
              value="Log in" 
            />
          </div>
        </div>
      </main>
    </article>
    );
  }
}

如果后续你需要对接后端接口做真实校验，只需要把handleLogin里的本地凭证匹配逻辑替换为接口请求逻辑即可

内容的提问来源于stack exchange，提问作者Jungleyes