Javascript 在我单击页面上的某个内容之前，不会触发输入验证。如何避免这种情况？

我检查输入是否为空、空等。我通过存储一个状态布尔值并为每个输入更新onChange事件来实现这一点。每个输入都使用React.useState存储在会话变量中。验证工作确实有效，但如果我键入一些内容，然后单击backspace直到输入框为空，您可以单击submit按钮并发送空数据段，我不知道如何防止这种情况，因为我正在检查每个输入框的每个onChange事件

这是我的一个输入

<input id="editCourse_placeHolder_courseName" type="text" placeholder={edit_Course?.name} onChange={new_category_name}/> 

这里是我的状态变量，它保存输入框的值，然后将该值发送到服务器

let [state_category_name, setState_New_Category_Name] = React.useState<string | undefined>("");

---

任何帮助都会很好，谢谢

这里有一些地方不对劲

首先，不要显式设置状态变量，例如，

myVariable='newvalue'

。仅使用setter更新它们，例如，

setMyVariable（“新值”）

。从

useState

hook返回的setter将您与组件生命周期联系起来，并根据更改重新呈现它

onChange

应该是函数而不是值，例如

const handleChange = e => /* set state here */

<input id="editCourse_placeHolder_courseName" type="text" 
    placeholder={edit_Course?.name} onChange={handleChange}
/> 

您不需要在状态中维护有效状态。您关心每次渲染是否有效，以便允许表单提交，所以只需在组件主体中执行。将验证结果设置为按钮上的禁用道具

<input name="view" disabled={!isValid} type="submit" 
    onClick={() => {submitEdit();history.push("/");}} value="Edit"
/>

{submitEdit（）；history.push（“/”；}}}value=“编辑”
/>

这里有一些地方不对劲

首先，不要显式设置状态变量，例如，

myVariable='newvalue'

。仅使用setter更新它们，例如，

setMyVariable（“新值”）

。从

useState

hook返回的setter将您与组件生命周期联系起来，并根据更改重新呈现它

onChange

应该是函数而不是值，例如

const handleChange = e => /* set state here */

<input id="editCourse_placeHolder_courseName" type="text" 
    placeholder={edit_Course?.name} onChange={handleChange}
/> 

您不需要在状态中维护有效状态。您关心每次渲染是否有效，以便允许表单提交，所以只需在组件主体中执行。将验证结果设置为按钮上的禁用道具

<input name="view" disabled={!isValid} type="submit" 
    onClick={() => {submitEdit();history.push("/");}} value="Edit"
/>

{submitEdit（）；history.push（“/”；}}}value=“编辑”
/>

const isValid = validateForm()

<input name="view" disabled={!isValid} type="submit" 
    onClick={() => {submitEdit();history.push("/");}} value="Edit"
/>