正確提交表單時的表單驗證錯誤

Question

我正在正確提交我的表單，但在表單驗證時給出的錯誤名稱不能為空，但我填寫了文本框，但同樣的錯誤即將到來。

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”，但隨后它也顯示了一條錯誤消息。

Answer 1

看起來 handledegreeChanged 函數應該是度數輸入的 onChange 函數。 如果是這種情況，那么修改 handledegreeChanged 函數將解決您的問題：

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