Xác thực biểu mẫu với phản ứng và material-ui

Question

Tôi hiện đang cố gắng thêm xác thực vào biểu mẫu được xây dựng bằng các thành phần vật liệu-ui. Tôi có nó làm việc nhưng vấn đề là cách tôi hiện đang làm nó chức năng xác nhận hiện đang được gọi là trên tất cả các thay đổi trạng thái trong đầu vào (tức là tất cả các chữ cái được gõ). Tuy nhiên, tôi chỉ muốn xác thực của mình xảy ra khi quá trình nhập đã dừng.

Với mã hiện tại của tôi:

class Form extends React.Component { 

    state = {open: false, email: '', password: '', email_error_text: null, password_error_text: null, disabled: true}; 

    handleTouchTap() { 
     this.setState({ 
      open: true, 
     }); 
    } 

    isDisabled() { 
     let emailIsValid = false; 
     let passwordIsValid = false; 

     if (this.state.email === "") { 
      this.setState({ 
       email_error_text: null 
      }); 
     } else { 
      if (validateEmail(this.state.email)) { 
       emailIsValid = true 
       this.setState({ 
        email_error_text: null 
       }); 
      } else { 
       this.setState({ 
        email_error_text: "Sorry, this is not a valid email" 
       }); 
      } 
     } 

     if (this.state.password === "" || !this.state.password) { 
      this.setState({ 
       password_error_text: null 
      }); 
     } else { 
      if (this.state.password.length >= 6) { 
       passwordIsValid = true; 
       this.setState({ 
        password_error_text: null 
       }); 
      } else { 
       this.setState({ 
        password_error_text: "Your password must be at least 6 characters" 
       }); 
      } 
     } 

     if (emailIsValid && passwordIsValid) { 
      this.setState({ 
       disabled: false 
      }); 
     } 
    } 

    changeValue(e, type) { 
     const value = e.target.value; 
     const nextState = {}; 
     nextState[type] = value; 
     this.setState(nextState,() => { 
      this.isDisabled() 
     }); 
    } 

    login() { 
     createUser(this.state.email, this.state.password); 
     this.setState({ 
      open: false 
     }); 
    } 

    render() { 

     let {open, email, password, email_error_text, password_error_text, disabled} = this.state; 

     const standardActions = (
      <FlatButton 
       containerElement={<Link to="/portal" />} 
       disabled={this.state.disabled} 
       label="Submit" 
       onClick={this.login.bind(this)} 
      /> 
     ); 

     return (
      <div style={styles.container}> 
       <Dialog 
        open={this.state.open} 
        title="Enter Your Details to Login" 
        actions={standardActions} 
       > 
        <span className="hint--right hint--bounce" data-hint="Enter in your email address"> 
         <TextField 
          hintText="Email" 
          floatingLabelText="Email" 
          type="email" 
          errorText={this.state.email_error_text} 
          onChange={e => this.changeValue(e, 'email')} 
         /> 
        </span> 
        <br /> 
        <span className="hint--right hint--bounce" data-hint="Enter your password"> 
         <TextField 
          hintText="Password" 
          floatingLabelText="Password" 
          type="password" 
          errorText={this.state.password_error_text} 
          onChange={e => this.changeValue(e, 'password')} 
         /> 
        </span> 
       </Dialog> 
       <h1>VPT</h1> 
       <h2>Project DALI</h2> 
       <RaisedButton 
        label="Login" 
        primary={true} 
        onTouchTap={this.handleTouchTap.bind(this)} 
       /> 
      </div> 
     ); 
    } 
} 

export default Form; 

Có cách nào mà tôi có thể đạt được chức năng mong muốn của tôi, mà không làm cho một sự thay đổi lớn đối với mã, hoặc hiện nó cần phải được refactored hoàn toàn?

Bất kỳ trợ giúp sẽ được nhiều đánh giá cao

Cảm ơn thời gian của bạn

Answer 1

Việc kiểm tra có xảy ra sau một khoảng thời gian nhất định không? Một giải pháp mà tôi nghĩ rằng sẽ đủ trong hầu hết các tình huống sẽ là để chia mã của bạn lên một chút. Không kích hoạt chức năng isDisabled() của bạn trong changedValue(). Thay vào đó, hãy chạy nó trên sự kiện onBlur thay thế.

Hãy thử điều này:

<TextField 
    hintText="Password" 
    floatingLabelText="Password" 
    type="password" 
    errorText={this.state.password_error_text} 
    onChange={e => this.changeValue(e, 'password')} 
    onBlur={this.isDisabled} 
/> 

và sau đó chức năng của bạn trở thành:

changeValue(e, type) { 
    const value = e.target.value; 
    const nextState = {}; 
    nextState[type] = value; 
    this.setState(nextState); 
} 

Answer 2

Bạn có thể sử dụng sự kiện onblur trường văn bản. Nó được kích hoạt khi đầu vào mất tiêu điểm.

Answer 3

này library mà tôi đã tạo ra, sẽ chăm sóc của tất cả mọi thứ liên quan đến lĩnh vực xác nhận và nó hỗ trợ các thành phần nguyên liệu-ui như cũng ...

Để xác thực các trường của bạn, bạn chỉ cần bao bọc thành phần trường và bạn đã hoàn thành ... tiết kiệm rất nhiều công sức trong việc quản lý trạng thái của bạn elf bằng tay.

<Validation group="myGroup1" 
    validators={[ 
      { 
      validator: (val) => !validator.isEmpty(val), 
      errorMessage: "Cannot be left empty" 
      }, ... 
     }]}> 
      <TextField value={this.state.value} 
         className={styles.inputStyles} 
         style={{width: "100%"}} 
         onChange={ 
         (evt)=>{ 
          console.log("you have typed: ", evt.target.value); 
         } 


    }/> 

Answer 4

Tôi vừa mới công bố npm package để phê chuẩn hình thức. Ví dụ làm việc có thể được tìm thấy trên github profile