Javascript 表单提交仅在第二次单击时提交，需要在ES6中回调

单击Submit将调用my

onSubmit

函数，它在该函数中执行两项操作：

设置

表单有效性的状态（bool）

提交表格

问题在于，它在第一次单击时失败，只在第二次单击时提交。 我知道这是来自提交的eval，即使它还没有设置状态并且在第一次运行时失败

我想提交预设置状态，然后在一次点击发送邮件预评估

请注意：我尝试过拆分函数，结果相同

我假设这里会有回调，但我不知道如何正确地将其应用于ES6

渲染元素：

this.onSubmit（event）}>Submit

onSubmit函数： 为了迭代以确保我解释得很好，我希望

if（this.state.formValidity==true）

仅在**所有其他条件求值后运行**，并保持在相同的函数范围内

谢谢，

---

Bud

是否需要从状态测试

formValidity

的值？如果不是，则

If（this.state.formValidity==true）

是多余的，您可以重新构造逻辑，以便更容易解释

setState

的异步特性，例如：

onSubmit = event => {
  event.preventDefault()

  let formValidity = true
  let errorType = undefined

  if (!validator.isEmail(this.state.email)) {
    formValidity = false
    errorType = this.state.formErrors.email
  } else if (!validator.isAlpha(this.state.fName) || !validator.isAlpha(this.state.lName)) {
    formValidity = false
    errorType = this.state.formErrors.name
  }

  if (!formValidity) {
    this.setState({
      formValidity,
      errorType
    }, () => console.log('Form is invalid'))
  } else {
    this.setState({
      formValidity,
      errorType
    }, () => console.log('Form is valid'))
  }
}

---

您还将看到我利用了

setState

的回调，它可以安全地假定仅在设置状态后运行

是否需要从状态测试

formValidity

的值？如果不是，则

If（this.state.formValidity==true）

是多余的，您可以重新构造逻辑，以便更容易解释

setState

的异步特性，例如：

onSubmit = event => {
  event.preventDefault()

  let formValidity = true
  let errorType = undefined

  if (!validator.isEmail(this.state.email)) {
    formValidity = false
    errorType = this.state.formErrors.email
  } else if (!validator.isAlpha(this.state.fName) || !validator.isAlpha(this.state.lName)) {
    formValidity = false
    errorType = this.state.formErrors.name
  }

  if (!formValidity) {
    this.setState({
      formValidity,
      errorType
    }, () => console.log('Form is invalid'))
  } else {
    this.setState({
      formValidity,
      errorType
    }, () => console.log('Form is valid'))
  }
}

---

您还将看到我利用了

setState

的回调，它可以安全地假定仅在设置状态后运行

从按钮中删除事件处理程序并将其添加到表单元素中：

并在构造函数中绑定

this.handleOnSubmit

关于您的检查，我建议您在每个输入字段发生更改事件时对其进行检查，并相应地更新状态。例如：

<input name="email" onChange={this.validateEmail}>

现在的问题是，我建议您创建额外的状态属性（每个输入字段一个）来跟踪单个字段的有效状态，如下所示：

this.state = {
  ...,
  fNameValid: false,
  lNameValid: false,
  emailValid: false,
  telValid: false,
}

现在，您的特定验证函数将只更新与特定字段相关的状态，而不是整个表单（以及您的errorType）：

最后，让您的

onSubmit

事件处理程序对所有字段执行检查：

handleOnSubmit() {
   let isFormValid = this.state.fNameValid
                  && this.state.lNameValid
                  && this.state.emailValid
                  && this.state.telValid;

   if (isFormValid) {
     console.log('mail sent!');
   } else {
     console.log('One of the inputs is erroneous');
   }
}

---

州的

formValidity

属性最终变得多余

从按钮中删除事件处理程序并将其添加到表单元素中：

并在构造函数中绑定

this.handleOnSubmit

关于您的检查，我建议您在每个输入字段发生更改事件时对其进行检查，并相应地更新状态。例如：

<input name="email" onChange={this.validateEmail}>

现在的问题是，我建议您创建额外的状态属性（每个输入字段一个）来跟踪单个字段的有效状态，如下所示：

this.state = {
  ...,
  fNameValid: false,
  lNameValid: false,
  emailValid: false,
  telValid: false,
}

现在，您的特定验证函数将只更新与特定字段相关的状态，而不是整个表单（以及您的errorType）：

最后，让您的

onSubmit

事件处理程序对所有字段执行检查：

handleOnSubmit() {
   let isFormValid = this.state.fNameValid
                  && this.state.lNameValid
                  && this.state.emailValid
                  && this.state.telValid;

   if (isFormValid) {
     console.log('mail sent!');
   } else {
     console.log('One of the inputs is erroneous');
   }
}

---

州的

formValidity

属性最终变得多余

setState是一个异步函数，您可以添加邮件发送代码或任何依赖于formValidity=true的代码作为setState函数的回调，这样就不需要最后一个if-else块。始终避免最后一个if-else块，因为setState以异步方式运行

this.setState({
        formValidity: true
    },function(){
        console.log("mail sent");
         //or any other code dependent on formValidity set to true.
    });

---

setState是一个异步函数，您可以将邮件发送代码或任何依赖于formValidity=true的此类代码添加为setState函数的回调，因此不需要最后一个if else块。始终避免最后一个if else块，因为setState以异步方式运行

this.setState({
        formValidity: true
    },function(){
        console.log("mail sent");
         //or any other code dependent on formValidity set to true.
    });

---

嗨，我得到的形式无效，在任何状态下，即使当我喜欢这个设计虽然，让我知道，如果你可以修复它的工作我需要一些睡眠。。。现在已编辑：-）。如果你有时间，一定要看看@Kox下面关于在更改时验证表单输入的建议；这是更好的长期解决方案。谢谢，Kox的建议也是正确的。太糟糕了，stackoverflow不允许多个正确答案。嗨，我得到的表单在任何状态下都是无效的，即使是正确的，但是我喜欢这个设计，让我知道你是否可以修复它工作我需要一些睡眠。。。现在已编辑：-）。如果你有时间，一定要看看@Kox下面关于在更改时验证表单输入的建议；这是更好的长期解决方案。谢谢，Kox的建议也是正确的。太糟糕了，stackoverflow不允许有多个正确答案。这是我的formError子组件：这是ComponentForm（持有formError comp.）：并且它在ComponentForm中的状态：将它们分开会更有意义，您能编辑您的答案以反映这一点吗？另外，如果我遗漏了任何信息，请告诉我。这是我的formError子组件：这是ComponentForm（持有formError comp.）：以及它在ComponentForm中的状态：将它们分开会更有意义，您能编辑您的答案以反映这一点吗？如果我遗漏了任何信息，也请告诉我。