bugfix> reactjs > 投稿

ログインフォームがあります。 Reactで検証しようとしました。 formタグのOnSubmitで、handleSubmit()を呼び出します。この関数は、validateForm()を呼び出すvalidateField()を呼び出します。 formValidがtrueかどうかを確認するためにすべて。正しい電子メールとパスワードの形式を入力して[送信]をクリックすると、falseに戻ります。私はそれをもう一度試してみて、それは間違って戻ってきます。

[送信]を3回クリックすると、フォームが有効になり、エクスプレスで送信されます。すぐに有効なフォームへの状態変更を認識しないのはなぜですか?検証をより良く反応させるにはどうすればよいですか?

たくさんありがとう

import React, { Component } from 'react';
    import './resources/Home.css';
    import FormErrors from './FormErrors.js';
    import { Redirect } from 'react-router-dom';
    class Home extends Component {
      constructor(props){
        super(props)
        this.state = {
          email: '',
          password: '',
          formErrors: {email: '', password: ''},
          emailValid: false,
          passwordValid: false,
          formValid: false
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
        this.validateField = this.validateField.bind(this);
        this.validateForm = this.validateForm.bind(this);
      }
      onChange(event){
        event.preventDefault();
        const target = event.target;
        const value = target.value;
        const name = target.name;
        this.setState({[name]: value});
      }
      validateField() {
        let fieldValidationErrors = this.state.formErrors;
        let emailValid = this.state.emailValid;
        let passwordValid = this.state.passwordValid;

            emailValid = this.state.email.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{0,})$/i);
            fieldValidationErrors.email = emailValid ? '' : 'email is invalid';
            passwordValid = this.state.password.length >= 6;
            fieldValidationErrors.password = passwordValid ? '': ' password is too short';
        this.setState({formErrors: fieldValidationErrors,
                        emailValid: emailValid,
                        passwordValid: passwordValid
                      }, this.validateForm());
      }
      validateForm() {
        this.setState({formValid: this.state.emailValid && this.state.passwordValid});
      }
      handleSubmit(event) {
        event.preventDefault();
        console.log('pressed submit');
        console.log('form valid: ' + this.state.formValid);
        this.validateField(); 
        if ( this.state.formValid === true) {
          console.log('here');
        fetch('/login', {
          method: 'post',
          headers: {'Content-Type':'application/json'},
          body: JSON.stringify({
            "email" : this.state.email,
            "password" : this.state.password
          })
         })
         .then(response => response.json().then(data => ({status: response.status,data:data})))
         .then(res => {  
           res.status === 200 ? alert('success') : alert('fail')
          res.data.errors.map(x => alert(x.msg)) })
         }
      }
      render() {
        return (
          <div class="page">
            <div className="Home">
              <div id="formWrap" >
             {// <div className="panel panel-default">
               // <FormErrors formErrors={this.state.formErrors} />
            //  </div>
              }
              <h2>Login</h2>
                <form id="sendInfo" onSubmit={this.handleSubmit} >
                  {this.state.formValid ? '' :this.state.formErrors.email}
                  <input data-lpignore="true" type="text" placeholder="email" name="em"  name="email" value={this.state.email} onChange={this.onChange}/>
                  {this.state.formValid ?  '' : this.state.formErrors.password }
                  <input data-lpignore="true" type="text" placeholder="password" name="pw" name="password" value={this.state.password} onChange={this.onChange}/>

                  <input type="submit" id="submit"  value="submit"/>
                </form>
              </div>
            </div>
          </div>
        );
      }
    }
    export default Home;

回答 2 件
  • 以下の説明に従ってお試しください。  1)npmはバリデーターをインストールしてから、コンポーネントで次のようにするか、個別のコンポーネント(つまりSingup.jsx)を作成して現在のコンポーネントにインポートします。 「./Singup」からvalidateSignupをインポートします。

    import Validator from 'validator';
    import isEmpty from 'lodash/isEmpty';
    export default function validateInput(data) {
      let errors = {}; 
      if (!Validator.isEmail(data.email)) {
        errors.email = 'Email is required';
      }
      if (Validator.isNull(data.password)) {
        errors.password = 'This field is required';
      }
      if (Validator.isNull(data.passwordConfirmation)) {
        errors.passwordConfirmation = 'This field is required';
      }
      return {
        errors,
        isValid: isEmpty(errors)
      }
    }
    
    

  • まったく新しい関数を使用するのではなく、「validateField()」関数でのみ状態「formValid」を設定できます。

       validateField() {
          let fieldValidationErrors = this.state.formErrors;
          let emailValid = this.state.emailValid;
          let passwordValid = this.state.passwordValid;
          emailValid = this.state.email.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{0,})$/i);
          fieldValidationErrors.email = emailValid ? '' : 'email is invalid';
          passwordValid = this.state.password.length >= 6;
          fieldValidationErrors.password = passwordValid ? '': ' password is too short';
          this.setState({
            formErrors: fieldValidationErrors,
            emailValid: emailValid,
            passwordValid: passwordValid
          }, () => this.setState({formValid: this.state.emailValid && this.state.passwordValid}));
        }
    
    

あなたの答え