如何在提交前验证输入？答案

【问题标题】：How to validate input before submitting?如何在提交前验证输入？
【发布时间】：2021-02-05 22:44:05
【问题描述】：

我想在提交之前验证输入。但是出了点问题，每次 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>

【问题讨论】：

setError 是异步的，在重新渲染之前不会更新 error 的新值。也许更改 validate 以返回一个字符串而不更新状态值，然后您可以在按钮 onClick 中设置错误，并在 if 语句中检查它。
我怎样才能通过这个？
setError 不是异步的。它是同步的，但原始 error 变量的值不会改变，因为它已经被分配了。它需要一个新的重新渲染（再次调用组件函数）来重新分配变量。
这能回答你的问题吗？ Reactjs - Form input validation

标签： javascript reactjs validation react-hooks form-submit

【解决方案1】：

因为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>

【讨论】：