在渲染时触发React JS onClick处理程序

Question

当尝试设置onKeyPress处理程序以在用户在用户名/密码文本字段上按Enter时登录用户时，由于某些原因，我的onClick处理程序会触发两次。

点击提交按钮时，它只会触发一次。 在文本字段上按Enter键触发onKeyPress事件时，它只会触发两次。

我不确定为什么。 我很确定我已经正确完成了该功能和onClick绑定。

export default class Login extends React.Component {
    constructor(props) {
        super(props);
    }
    onKeyPress(evt) {
        if (evt.key === "Enter") {
            console.log("Enter key detected");
            this.login();
        }
    }
    loginOnClick(evt) {
        console.log('Login.loginOnClick()');
        this.login();
    }
    login = async () => {
        return true;
    }
}


render()
{
    return (
        <form>
            <input type="text" placeholder="Enter username" onKeyPress={e => this.onKeyPress(e)} />
            <button type="submit" onClick={(e) => this.loginOnClick(e)}>Login</button>
        </form>
    );
}
}