如何在提交前验证输入

Question

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

Answer 1

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

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

const validate = () => {
value.length>5?setError("Some errors"):setError("");
return value.length <= 5;
}
<Button  onClick={() => {
const isValid = validate();
if(isValid) submit()
}> Submit </Button>