表单中的字段要求我关注它们才能显示错误消息。我希望在我尚未聚焦字段时单击“提交”时出现错误消息。
这是钩子(怀疑是关于稍后的 setIsTouched 调用):
const useInputModifed = (validationArray) => { const [enteredValue, setEnteredValue] = useState(""); const [isTouched, setIsTouched] = useState(false); // [{errorName:,fn:validationFn}] let errorArray = []; for (const errorEntry of validationArray) { if (errorEntry.isErrorFn(enteredValue)) { errorArray.push(errorEntry.errorName); } } const hasError = errorArray.length > 0 && isTouched; const valueChangeHandler = (event) => { setEnteredValue(event.target.value); }; const reset = () => { setEnteredValue(""); setIsTouched(false); }; console.log(errorArray, isTouched); return { value: enteredValue, validationArray: errorArray, hasError, valueChangeHandler, setIsTouched, isTouched, reset, }; };
这是表单处理程序(我为每个字段使用了别名):
const formSubmissionHandler = (event) => { event.preventDefault(); touchNameField(true); touchEmailField(true); if (nameInputHasError || emailInputHasError) { //console logging both fields gives false even after touching return; } if (!nameInputHasError && !emailInputHasError) { resetNameInput(); resetEmailInput(); } };
以验证名称字段为空为例,我单击开头的提交按钮。
目前在 const hasError = errorArray.length > 0 && isTouched;
中,数组有元素,但 isTouched 为 false,因为我没有聚焦该字段。
然后是“touchNameField(true);”进来了。我尝试使 hasError 为 true,但它仍然显示为 false。
setState 调用是异步的,这是问题所在吗?如果我删除重置调用它就可以了。但我仍然不明白为什么 nameInputError 等是 false。
如果不运行它,我相信这是因为
errorArray
和hasError
对更改没有反应。因此,这还取决于您实例化该钩子的位置。 如果不进行测试,我会尝试以下操作:同样,未经测试,您可能需要一些调整。