javascript - 提交按钮需要点击 2 次才能调用 React 中的函数

Question

当我单击提交按钮时，它需要单击才能正确触发该功能。在执行 if 语句之前我没有问题。它是否有一些事实，即我在里面有 2 个 if 语句，每次点击后它只检查 1 个 if 语句？

  onSubmit = (e) => {

const { firstName, lastName, email, eventDate, validation} = this.state

if (firstName, lastName, eventDate, email) {
  this.setState({validation: true})
  if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email)) {
    this.setState({validation: true})
  } else {
    this.setState({validation: false})
    this.setState({errorMessage: 'Please enter correct email adress'})
  }
} else {
  this.setState({validation: false});
  this.setState({errorMessage: 'Please fill in all fields properly'})
} 

if (validation) {

  const newEvent = {
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    email: this.state.email,
    eventDate: this.state.eventDate
  }

  this.props.addEvent(newEvent);

  this.setState({
    firstName: '',
    lastName: '',
    email: '',
    eventDate: '',
    validation: false,
    errorMessage: ''
  });
}

e.preventDefault();
}

标签： javascriptreactjsif-statementstateform-submit

Answer 1

您也不需要在彼此之后直接进行两个 setState 调用。将它们放在一个 setState 中，而不是像这样：

this.setState({ validation: false, errorMessage: '请输入正确的电子邮件地址', )}