处理联系表单中的错误 - 获取正确的功能

Question

我使用 Material-ui 和 React 创建了一个表单。 我的提交方法有一些问题。 我正在显示一个快餐栏以通知用户提交成功，还显示一个快餐栏以提醒用户缺少必填字段。 我的问题是万一用户没有填写所有字段，但经过第二次尝试终于成功了。我的警报小吃栏仍在出现，但我想显示成功的小吃栏。不知道我的方法需要改变什么。

 submit = () => {
    const {
      firstName,
      lastName,
      email,
      phone,
      date,
      time,
      projectStages,
      projectDescription,
      budgets,
      mainObjectives,
      applicationTypes,
    } = this.state
    // eslint-disable-next-line max-len
    if (lastName && firstName && email && phone) {
      this.setState({
        lastName,
        firstName,
        email,
        phone,
        date,
        time,
        projectStages,
        projectDescription,
        budgets,
        mainObjectives,
        applicationTypes,
      })
      document.getElementById('snackbar').style.display = 'block'
      setTimeout(() => {
        this.setState({ open: false })
      }, 2000)
      // eslint-disable-next-line max-len
      this.saveMessage(firstName, lastName, phone, email, date, time, projectStages, projectDescription, budgets, mainObjectives, applicationTypes)
    } else {
      document.getElementById('snackbar').style.display = 'block'
      document.getElementById('snackbar').style.backgroundColor = 'red'
      document.getElementById('snackbar').textContent = 'Please fill in all required fields'
      setTimeout(() => {
        document.getElementById('snackbar').style.display = 'none'
      }, 2000)
    }
  }

Answer 1

在重新设置之前清除你的计时器

timer && clearTimeout(timer);