Значение логического состояния изменяется на неопределенное во втором onSubmit - PullRequest
Новая
       60

Значение логического состояния изменяется на неопределенное во втором onSubmit

2 голосов
/ 27 июня 2019

Я работаю над проектом React, внедряю проверку электронной почты и устанавливаю состояние true, когда оно не проходит, и false, когда это происходит.Часть проверки работает, но получает неопределенное состояние на втором onSubmit.

Немного подробнее: я проверяю состояние onChange и onSubmit.OnChange, кажется, работает как ожидалось.onSubmit работает при первом щелчке / отправке, но при следующем щелчке / отправке изменяет состояние на «неопределенное», и я понятия не имею, почему.

Лучше всего посмотреть мой кодовый блок и начать заполнять поле электронной почты и проверять консоль, пока я регистрирую состояние.

Вот фрагмент кода: 

this.state = {
  inputs: {
    name: '',
    email: '',
    message: '',
  },
  show: true,
  errors: {
    name: false,
    email: false,
    message: false,
  },
};

validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\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,}))$/;
return re.test(email);
}

handleOnChange = e => {
const { name, value } = e.target;

const emailInput = e.target.value;
const emailValid = this.validateEmail(emailInput);

if (name === 'email') {
  this.setState({
    inputs: {
      email: emailInput,
    },
    errors: {
      email: !emailValid,
    },
  });
} else {
  this.setState({
    inputs: {
      ...this.state.inputs,
      [name]: value,
    },
    errors: {
      ...this.state.errors,
      [name]: false,
    },
  });
}

console.log('errors.email onChange = ' + this.state.errors.email);
};

Итак, почему это происходит?и как я могу решить?

1 Ответ

1 голос
/ 27 июня 2019

Вы пропустили условие else, когда поле не пустое.это удалит ключ объекта ошибки из состояния, то есть тот, который дает вам ошибку undefined.

переписывает функцию handleSubmit следующим образом. 

    handleSubmit = (e, slackPost) => {
    e.preventDefault();

     console.log('errors.email onClick = ' + this.state.errors.email);

    let inputFields = document.getElementsByClassName('form-input');
    let invalidEmailMessage = document.querySelector('#invalid-email-message');
    let failMessage = document.querySelector('#fail-message');
    let failMessageBox = document.querySelector('.alert-fail');

    // empty array to house empty field names
    const emptyFieldNames = [];

    // empty object to house input state
    let errors = {};

    // loop through input fields...
    for (var i = 0; i < inputFields.length; i++) {
      if (inputFields[i].value === '') {
        let inputName = inputFields[i].name;
        // add name to new array
        emptyFieldNames.push(inputFields[i].getAttribute('name'));
        // add input name and value of true to new object
        errors[inputName] = true;
        failMessageBox.style.display = 'block';
      } else {
        let inputName = inputFields[i].name;
          errors[inputName] = false;
      }
    }
    debugger;
    this.setState({ errors });

    if (emptyFieldNames.length > 0) {
      failMessage.innerHTML =
        'Please complete the following field(s): ' + emptyFieldNames.join(', ');
    } else if (this.state.errors.email === true) {
      invalidEmailMessage.innerHTML = 'Please enter a valid email';
    } else {
      console.log('For Submitted!');
    }

  };
...