如何解决提交前如何验证输入?
我想在提交之前验证输入。但是每次提交()运行:((
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>
解决方法
因为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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。