Question

在我的登录页面中，我想让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被设置，并继续使用代码，这导致一些非常奇怪的行为，并且无法登录。

Answer 1

在this.handleLogin中，您需要防止表单提交时的默认行为，即POST数据。请在handleLogin中尝试此操作：

event.preventDefault();

当使用onSubmit而不是onClick时，反应await等待

1 个答案: