Question

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

Answer 1

validateForm会返回一个承诺，因为它已声明async。

您需要等待承诺解决：

handleSubmit(e) {
  e.preventDefault();
  this.validateForm().then(result => { // or use `async` + `await`
    if (!result) return; 
    //Call the api to post data
  });
}

Answer 2

异步效应会感染它触及的一切。因此，您需要在handleSubmit

中处理验证的异步性质

async handleSubmit(e) {
    e.preventDefault();
    if (await this.validateForm()) {
        //Call the api to post data
    }
}

在React组件

2 个答案: