代码之家 › 专栏 › 技术社区 › boking

使用onSubmit而不是onClick时,react await不等待

react-bootstrap reactjs html javascript

boking · 技术社区 · 6 年前

在我的登录页面中,除了单击“登录”按钮外,我还想让ENTER键起作用,因此我将按钮设置为“提交”,并将表单设置为“onSubmit”方法,如下所示:

<Button onClick={(event) => this.handleLogin(event)}>{loginTextElement}</Button>

到

<Button type="submit">{loginTextElement}</Button>

我现在也有了这个:

<form onSubmit={(event) => this.handleLogin(event)}>

然而,我发现我的方法handleLogin如下所示:

const signedIn = await API.authenticate(this.state.email, this.state.password);

alert("this is displayed immidiately with onSubmit, but with onClick it waits until signedIn is set")

if(signedIn==API.constants.ADMIN || signedIn==API.constants.CUSTOMER){
    console.log("signedin was admin or customer")
    this.setState({signedIn: signedIn})
}else{
    this.setState({loginPressed:false, showError:true})
}

不再等待设置const signedIn,而是继续编写代码,这导致了一些非常奇怪的行为,用户无法登录。