Question

我正在研究React项目，并实现电子邮件验证，如果不通过则将状态设置为true，如果不通过则将状态设置为false。验证部分有效，但是在第二个onSubmit上获得未定义状态。

更多细节：我正在检查状态onChange和onSubmit。 onChange似乎按预期工作。 onSubmit确实在第一次单击/提交时起作用，但是在下一次单击/提交时，它将状态更改为“未定义”，我也不知道为什么。

最好view my codepen，然后在我记录状态时开始填写电子邮件字段并检查控制台。

这是代码段：

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);
};

那么，为什么会这样呢？以及我该如何解决？

Answer 1

当该字段不为空时，您错过了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!');
    }

  };

布尔值状态值在第二次onSubmit更改为Undefined

1 个答案: