正确提交表单时出现表单验证错误答案

【问题标题】：Form Validation error on correctly submitting the form正确提交表单时出现表单验证错误
【发布时间】：2021-09-05 22:03:45
【问题描述】：

我正在正确提交我的表单，但在表单验证中给出了一个错误名称不能为空，但我填写了文本框但相同错误来了。

state = {
degree: "",
data: [],
errors: {},
  };


handleValidations() {
    let data = this.state.data;
    let errors = {};
    let formIsValid = true;

   if (!data["degree"]) {
     formIsValid = false;
     errors["degree"] = "Cannot be empty";
   }

 this.setState({
      errors: errors,
    });
    return formIsValid;
  }
submitHandler = async (e) => {
 e.preventDefault();
 const data = {
      degree: this.state.degree
};
if (this.state.editId === "") {
      if (this.handleValidations()) {
              alert("Form submitted");
      services.postService("education", data).then((res) => {
        console.log(res.data);
}
}
else{
      alert("error");
    }
}
}

  handledegreeChanged = (field, e) => {
    let data = this.state.data;
    data[field] = e.target.value;
    this.setState({ degree: data });

    this.setState({
     degree: e.target.value,
    });
  };

 <form>
 <label for="inputdegree" className="col-form-label">
                    Degree
                  </label>
                  <input
                    onChange={this.handleChangeData.bind(this, "degree")}
                    value={this.state.data["degree"]}
                    type="text"
                    ref="degree"
                    className="form-control form-input"
                    id="inputdegree"
                    placeholder="Degree"
                    required
                  />
                  <div style={{color: "red"}}>{this.state.errors["degree"]}</div>
 <button
                  onClick={this.submitHandler.bind(this)}
                  type="button"
                  className="submit-button"
                >
</button>
                </form>

如下图所示，我在文本框中输入了“B.Tech”字段，但它也显示错误消息。

【问题讨论】：

您的代码示例不完整，请提供完整的代码示例
代码格式化可通过以下快捷方式在 Visual Studio Code 中使用：在 Windows 上 Shift + Alt + F。在 Mac 上Shift + Option + F。在 Linux 上 Ctrl + Shift + I.
@konekoya 我已经为一个输入提供了代码，因为代码非常大
尝试删除尽可能多的代码以缩小错误范围
请分享handleChangeData函数的代码。另外，你什么时候调用handledegreeChanged函数？

标签： javascript jquery node.js reactjs react-native

【解决方案1】：

看起来，handledegreeChanged 函数应该是您的 onChange 函数，用于度数输入。如果是这种情况，那么将 handledegreeChanged 函数修改为此将解决您的问题：

handledegreeChanged = (field, e) => {
    let data = this.state.data;
    data[field] = e.target.value;
    this.setState({ data, degree: e.target.value });
};

【讨论】：