Blazor Server应用表单验证通过时启用按钮的异常问题求助
问题原因
- 核心逻辑错误:多余的键盘事件处理方法违规拼接输入内容
你编写的KeyboardEventHandler没有对按键类型做判断,无论按下的是可输入字符还是退格、回车、Shift等功能键,都直接把KeyboardEventArgs.Key的返回值拼接到模型字段后。对于功能键,Key属性返回的是功能键名称字符串(比如退格对应Backspace、回车对应Enter),直接拼接就会出现你遇到的功能键名称被写入输入框的问题。 - 重复实现Blazor内置双向绑定能力
你已经为InputText组件配置了@bind-Value双向绑定,Blazor内置的表单组件会自动同步输入内容到模型,同时自动触发EditContext的OnFieldChanged事件,完全不需要你手动监听键盘事件更新模型、手动通知字段变更,这部分逻辑属于完全多余的画蛇添足。
修复方案
- 移除两个
InputText标签上的@onkeyup事件绑定,删除后标签示例:
<InputText Id="name" @bind-Value="@Model.Name" /> <InputText Id="body" @bind-Value="@Model.Text" />
- 删除后台代码中无用的
KeyboardEventHandler方法,以及KeyPressed、EventInfo两个未使用的字段。 - (可选优化)调整提交按钮禁用状态的属性定义,更符合Blazor的使用规范:
将字符串类型的OkayDisabled改为布尔类型:
// 旧代码 // protected string OkayDisabled { get; set; } = "disabled"; // 新代码 protected bool IsSubmitDisabled { get; set; } = true;
调整SetOkDisabledStatus逻辑:
private void SetOkDisabledStatus() { IsSubmitDisabled = !EditContext.Validate(); }
修改按钮的禁用属性绑定:
<button type="submit" disabled="@IsSubmitDisabled">Ok</button>
修改后表单的双向绑定、校验触发、按钮状态更新逻辑都会正常运行,也不会再出现功能键名称被写入输入框的问题。
内容的提问来源于stack exchange,提问作者Baba
相关产品推荐
相关产品推荐

