我的提交按钮未启用。我怎么做？

Question

我的提交按钮应该被启用，但它处于禁用状态。在对电子邮件和密码进行验证之前，它工作正常，但在实施验证后它处于禁用状态。 谁能帮我解决我哪里出错了？

class Signup extends Component{
 
constructor(props){
super(props);

 this.handleMouseHover= this.handleMouseHover.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);

this.state = {
  isHovering: false,
  isDisabled : true,
  isFormValid:false,
  fname: '',
  lname: '',
  email: '',
  code:'',
  number:'',
  password: '',
  confirmPassword: '',
  isPasswordShown:'false',
  isConfirmPasswordShown:'false',
  emailValid:false,
  passwordValid:false, 
  formValid:false,  
  formErrors:{email:'',password:''},
   

    }
}


togglePasswordVisibility=()=>{
const{isPasswordShown} =this.state;
this.setState({isPasswordShown : !isPasswordShown});

}



togglePasswordVisibility2=()=>{
const{isConfirmPasswordShown} =this.state;
this.setState({isConfirmPasswordShown : !isConfirmPasswordShown});

  }

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

 }

validateField(fieldName, value){
  let fieldValidationErrors=this.state.formErrors;
  let emailValid = this.state.emailValid;
  let passwordValid = this.state.passwordValid;

  switch(fieldName){
    case 'email':
      emailValid = value.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.);+[a-zA-Z]{2,}))$/);
      fieldValidationErrors.email = emailValid?'':'invalid';
      break;

    case 'password':
      passwordValid=value.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{10,}$/);
      fieldValidationErrors.password = passwordValid?'':'invalid';
     break;
     default:
     break; 
  }
    this.setState({emailValid: emailValid, 
                  formErrors: fieldValidationErrors,
                  passwordValid: passwordValid
    },this.validateForm);
}
validateForm(){
  this.setState({formValid: this.state.emailValid && this.state.passwordValid});
}

handleSubmit(e) {
    e.preventDefault();

  }


isChecked = () => {
  this.setState((state)=>({isDisabled : !state.isDisabled}))
}
handleMouseHover() {
  this.setState((state)=>({isHovering : !state.isHovering}))
}

内部渲染函数。我只是提到了必填字段。

  render()
 {
   const {isPasswordShown} = this.state;
   const{isConfirmPasswordShown} = this.state;
   return (
   <div className={styles.page}>

   <form className={styles.form} onSubmit = {this.handleSubmit}>
     <h1 className={styles.back}> Back </h1>
    <h1 className={styles.createhead}>Create Account</h1>
    <br/>

     <div className={styles.name}>
        <div className={styles.fn}>
        <p >First Name <span className={styles.star}>*</span></p>
         <input
          className={styles.fntb}
          type="text"
          name='fname'
          value={this.state.fname}
          onChange={(event) => this.handleUserInput(event)}
          placeholder="Enter First Name"
          id='fname'
        />
      </div>

      <div className={styles.ln}>
        <p >Last Name <span className={styles.star}>*</span></p>
        <input
          className={styles.lntb}
          type="text"
          name='lname'
          placeholder="Enter Last Name"
          onChange={(event) => this.handleUserInput(event)}
        value={this.state.lname}
        id='lname'
        />
    </div>
    </div>

    <div className ={styles.email} >
        <p >Email ID <span className={styles.star}>*</span></p>
        <input
          className={styles.emailtb}
          type="email"
          placeholder="email@example.com"
          onChange={(event) => this.handleUserInput(event) }
            value={this.state.email}
            name='email'
            id='email' />
     </div> 

 <div className={styles.pwd}>
    <p>Password <span className={styles.star}>*</span></p>
    <input
      className={styles.pwdbox}
      type={(isPasswordShown) ? "password" : "text"}
      onChange={(event) => this.handleUserInput(event) } 
      id='password'
      value={this.state.password}
      name='password'
    />
 <img  className={styles.eye1} onClick={this.togglePasswordVisibility} 
 src={hide} alt='hide' />

  <div 
       className={styles.info} >
        <img 
         src={info} 
         onMouseEnter={this.handleMouseHover}
         onMouseLeave={this.handleMouseHover} />
  </div>
  </div> 

    {this.state.isHovering && <div className={styles.rules}> 
          <div className={styles.triangle}> </div>
            <ul className={styles.list}> 
              <li className={styles.l1}>Password should be at least 10 characters. </li>
              <li className={styles.l2}>Passwod must have at least 1 upper case and 1 lower case letter.</li>
              <li className={styles.l3}> Password must have at least 1 number</li>
              <li className={styles.l4}>Password must have at least 1 special character.</li>
              </ul>
          </div>
        }
        
     <div className={styles.rpwd}>
         <p>Re-enter Password <span className={styles.star}>*</span></p>
         <input
          type={(isConfirmPasswordShown) ? "password" : "text"}
          className={styles.rpwdbox}
          id="confirmPassword"
          name='confirmPassword'
          onChange={(event) => this.handleUserInput(event)} 
          value={this.state.confirmPassword}
        />
          <img  className={styles.eye2} onClick= 
          {this.togglePasswordVisibility2} src={hide} alt='hide' />
     </div> 

 <div className={styles.check}>
          <label>
          <input
          type='checkbox'
          className={styles.checkbox}
          id='termschkbx'
          value='red'
          onChange= {this.isChecked}
          /></label>

 <span className='trm'>  I agree to Terms & Conditions.<a href="" 
 className={styles.readme}>Read here</a> </span>
 </div>

   <div>
         <button
         type="submit"
         id="sub1"
         disabled= {this.state.isDisabled ||
                    !this.state.formValid ||
                    !this.state.fname ||  
                    !this.state.lname ||
                    !this.state.email ||  
                    !this.state.password || 
                    !this.state.confirmPassword ||
                    !this.state.code || 
                    !this.state.number }

         className={styles.createaccount} 
         type="submit">CREATE ACCOUNT</button>
        </div>

我是 reactJS 的新手。如果很简单，请原谅。

Answer 1

您的this.state 中有isDisable: true。

请尝试根据需要更新状态，或将其设置为false。

编辑：

我在这里看到一个问题：

// inside validateField
switch(fieldName){
    case 'email':
      emailValid = value.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.);+[a-zA-Z]{2,}))$/);
      fieldValidationErrors.email = emailValid?'':'invalid';
      break;

    case 'password':
      passwordValid=value.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{10,}$/);
      fieldValidationErrors.password = passwordValid?'':'invalid';
     break;
    
    default:
    break; 
}
//

validateForm(){
  this.setState({formValid: this.state.emailValid && this.state.passwordValid});
}

emailValid和passwordValid如果有效则包含''（空字符串），如果无效则包含'invalid'。

在验证表单中，在 emailValid 和 passwordValid 状态之前添加 !(not)。

validateForm(){
  this.setState({formValid: !this.state.emailValid && !this.state.passwordValid});
}

建议：如果可能，将emailValid和passwordValid的数据改为布尔值，然后分别应用检查。