在React组件

时间:2018-05-16 09:46:07

标签: javascript reactjs ecmascript-6 async-await es6-promise

我正在处理一个处理表单提交的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)
        });
    }
}

2 个答案:

答案 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
    }
}