我正在处理一个处理表单提交的React组件。
<form
name="theForm"
ref={(el) => { this.theForm = el }}
onSubmit={this.handleSubmit}
noValidate
>
在提交事件处理程序上我执行验证,使用HTML5表单checkvalidity()调用另一个函数,validateForm();
handleSubmit(e) {
e.preventDefault();
if (this.validateForm()) {
//Call the api to post data
}
}
如果validateForm的有效性为false,我将填充一个名为dirtyFormInputs的状态的列表,该状态将传递给表单的子组件。
由于setState异步行为,我更改了我的代码以使用async / await处理dirtyFormInputs列表的更新,如下所示:
async validateForm() {
const formLength = this.theForm.length;
if (this.theForm.checkValidity() === false) {
this.setState({ dirtyFormInputs: [] });
for(let input of this.theForm){
input.nodeName.toLowerCase() !== 'button'
&& await this.validateInput(input);
}
return false;
}
return true;
}
但是由于我更改了validateInput方法以正确更新dirtyFormInputs,因此validateForm()上的return false语句不再有效,即使在valitidy检查失败时也会提交我的表单。
validateInput(input) {
if (!input.validity.valid) {
return new Promise((resolve) => {
this.setState({
dirtyFormInputs: [...this.state.dirtyFormInputs, input.name]
}, resolve)
});
}
}
答案 0 :(得分:2)
validateForm
会返回一个承诺,因为它已声明async
。
您需要等待承诺解决:
handleSubmit(e) {
e.preventDefault();
this.validateForm().then(result => { // or use `async` + `await`
if (!result) return;
//Call the api to post data
});
}
答案 1 :(得分:2)
异步效应会感染它触及的一切。因此,您需要在handleSubmit
async handleSubmit(e) {
e.preventDefault();
if (await this.validateForm()) {
//Call the api to post data
}
}