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

Question

单击“提交”会调用我的 onSubmit函数做了两件事:

1. 为 formValidity 设置状态( bool )
2. 提交表单

问题是第一次点击失败，第二次才提交。 我知道这是来自提交的 eval，即使它尚未设置状态并且在第一次运行时失败。

我希望 onSubmit 执行 setStates，然后执行 eval 以一键发送邮件。

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

我假设这里有一个回调，但我不知道如何在 ES6 中正确应用它。

渲染元素:

<button onClick={(event) => this.onSubmit(event)}>Submit</button>

onSubmit 函数:

onSubmit = (event) => {
    event.preventDefault();
    if (!validator.isEmail(this.state.email)) {
        this.setState({
            errorType: this.state.formErrors["email"],
            formValidity: false
        })
    } else {
        this.setState({
            formValidity: true
        })
    }
    if (!validator.isAlpha(this.state.fName) || !validator.isAlpha(this.state.lName)) {
        this.setState({
            errorType: this.state.formErrors["name"],
            formValidity: false
        })
    } else {
        this.setState({
            formValidity: true
        })
    }
    if (this.state.formValidity === true) {
        console.log('mail sent!');

    } else {
        console.log('One of the inputs is erroneous');

    }

}

为了确保我能很好地解释这一点，我想 if (this.state.formValidity === true) **仅在**所有其他条件评估后运行并保持在相同的函数范围内。

谢谢， 芽

Answer 1

从按钮中删除事件处理程序并将其添加到表单元素中:
<form onSubmit={this.handleOnSubmit}>并绑定(bind)this.handleOnSubmit在构造函数中。

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

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

这个(绑定(bind)的)函数可以执行对 email 的检查。字段，如果有效并且 name字段有效，只需更新 this.formValidity状态为 true。

然后，在您的 handleOnSubmit 中函数，删除除表单验证检查之外的所有内容。

编辑:
更改所有输入' onChange处理程序包含对特定函数的引用，该函数将对某些输入字段执行验证(并更新相应字段的值 - 如果您已经在使用它)。例如(引用之前的输入字段):

validateEmail() {
   // Update input's state value
   // Perform validation for email input and update corresponding state
}

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

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

现在您的特定验证函数将仅更新与特定字段相关的状态，而不是整个表单(和您的错误类型):

validateEmail() {
   // Update input's state value

   if (!validator.isEmail(this.state.email)) {
      this.setState({
        emailValid: false,
        errorType: this.state.formErrors["email"],
      })
   } else {
      this.setState({
        emailValid: true
      })
   }
}

最后，有你的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属性(property)最终会变得多余。