Question

我正在用ReactJS创建一个网站，现在正在做注册部分。它具有三个输入：名称，电子邮件和密码。这些下方有一个按钮。我希望禁用此按钮，直到用户正确填写3个输入为止：至少包含2个字符的名称，具有@符号的有效电子邮件地址以及至少包含6个字符，1个大写字母和1个数字的密码。这些参数只是示例，我想将其实现。 React怎么可能呢？我看了几本教程，但还没有找到我想要的东西。谢谢。：）

class Signup extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      type: 'password',
      score: 'null'
    }
    this.showHide = this.showHide.bind(this);
  }
  showHide(e){
    e.preventDefault();
    e.stopPropagation();
    this.setState({
      type: this.state.type === 'input' ? 'password' : 'input'
    })  
  }

  render() {
    return (
      <div className='popup'>
        <div className='popup_inner'>
          <img className="closeme" onClick={this.props.closePopup} src={close} alt="close"></img>
          <div className="popup_inner2">
            <h1 className="popuph1">Sign Up<span className="dot">.</span></h1>
            <div className="group">
              <input className="input-field" type="text" name="fullname" required></input>
              <label>Name</label>
            </div>
            <div className="group">
              <input className="input-field" type="text" name="email" required></input>
              <label>Email</label>
            </div>
            <div className="group">
              <input className="input-field" type={this.state.type} name="psw" required></input>
              <label className="password">Password</label>
              <span className="password-show" onClick={this.showHide}>{this.state.type === 'input' ? 'HIDE' : 'SHOW'}</span>
            </div>
            <div  className="signupbtns">
              <button className="register">Sign up now</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

ReactJS：禁用注册按钮，直到正确填写注册表单？

0 个答案: