MudBlazor登录表单按Enter键提交需两次操作方可成功的问题咨询
MudBlazor登录表单按Enter键提交需两次操作方可成功的问题咨询
各位好,我最近在做Blazor项目的登录功能时遇到了一个很诡异的问题,想请大家帮忙看看:
当我输入正确的用户名和密码后,在用户名输入框按Enter键提交,应用会立刻显示"Invalid username or password"的错误提示,但如果我再按一次Enter键,就能成功完成登录跳转;不过要是直接点击页面上的登录按钮,一次就能成功登录,完全没有问题。
下面是我当前的登录页面代码:
Razor模板部分
@page "/" @using MudBlazor.Components.Layout @using MudBlazor.Components.Service @using Stocky.Shared.Models @inject HttpClient Http @inject NavigationManager Navigation @inject AuthService AuthService @layout NoNavbar <div class="d-flex justify-center align-center" style="height: 70vh;"> <MudGrid Class="ma-0 pa-6" Style="max-width: 600px;"> <MudItem xs="12"> <MudPaper Class="pa-6" Elevation="3"> <MudForm> <MudTextField T="string" @ref="_firstInput" @bind-Value="Data.UserName" Label="Username" Class="mb-4" Error="@_isLoged" OnKeyDown="HandleKeyDown" ErrorText="Invalid username or password" /> <MudTextField T="string" @ref="_secondInput" @bind-Value="Data.PasswordHash" Label="Password" InputType="InputType.Password" Class="mb-4" Error="@_isLoged" OnKeyDown="Enter" ErrorText="Invalid username or password" /> <MudButton Variant="Variant.Filled" OnClick="Submit" Color="Color.Primary" FullWidth="true"> Login </MudButton> </MudForm> </MudPaper> </MudItem> </MudGrid> </div>
逻辑代码部分
@code { private MudTextField<string> _firstInput = null!; private MudTextField<string> _secondInput = null!; [Parameter] public AuthenticationData Data { get; set; } = new(); private bool _isLoged; private bool _isSubmitting = false; protected override async Task OnInitializedAsync() { await AuthService.LoadTokenAsync(); if (!string.IsNullOrWhiteSpace(AuthService.Token)) { Navigation.NavigateTo("/home", true); } } private async Task Submit() { if (_isSubmitting) return; _isSubmitting = true; _isLoged = false; StateHasChanged(); try { var response = await Http.PostAsJsonAsync("http://localhost:5191/api/Auth/Verify", Data); if (response.IsSuccessStatusCode) { var resultText = await response.Content.ReadAsStringAsync(); var loginResponse = new LoginResponse { Token = resultText }; if (!string.IsNullOrWhiteSpace(loginResponse.Token)) { AuthService.SetToken(loginResponse.Token); _isLoged = false; Navigation.NavigateTo("/home"); } else { _isLoged = true; } } else { _isLoged = true; } } catch { _isLoged = true; } finally { _isSubmitting = false; StateHasChanged(); } } private async Task HandleKeyDown(KeyboardEventArgs e) { if (e.Key == "Tab") { await _secondInput.FocusAsync(); } } private async Task Enter(KeyboardEventArgs e) { if (e.Key is "Enter" or "NumpadEnter") { await Submit(); } } public class LoginResponse { public string? Token { get; set; } } }
为了排查问题,我已经做了这些调整:
- 移除了
HandleKeyDown方法里的Submit调用,现在只有密码输入框的Enter键会触发提交逻辑 - 加了日志确认
Submit方法没有被重复调用 - 在修改状态后手动调用了
StateHasChanged()确保UI更新
但问题依然存在,想请教下有没有朋友遇到过类似的情况,或者能帮我找出问题出在哪里?
内容来源于stack exchange
相关产品推荐
相关产品推荐

