时间戳

首页 > 解决方案 > 如何在提交之前验证输入？

javascript - 如何在提交之前验证输入？

问题描述

我想在提交之前验证输入。但是出了点问题，每次 submit() 运行 :((

const [value, setValue] = React.useState("");
const [error, setError] = React.useState("");
const validate = () => {
  value.length>5?setError("Some errors"):setError("");
}
const submit = () => {do something...}
...
<input onChange={e => setValue(e.target.value)} />

<Button  onClick={() => {
  validate();
  if(!error.length) submit()
}> Submit </Button>

标签： javascriptreactjsvalidationreact-hooksform-submit

解决方案

因为该error变量只会在组件的下一次渲染中包含新值。这是由于方式useState，或者更确切地说是 Hooks 在一般工作中。

相反，您必须在 validate 函数中返回结果是否有效。

const validate = () => {
  value.length>5?setError("Some errors"):setError("");
  return value.length <= 5;
}

<Button  onClick={() => {
  const isValid = validate();
  if(isValid) submit()
}> Submit </Button>

推荐阅读