Blazor中JSInterop修改输入值后绑定属性未更新问题咨询

• 输入框事件绑定语法错误
  Blazor的事件绑定需要添加@前缀，你当前写的OnFocus是原生HTML属性，无法正确执行C#委托逻辑，可能导致聚焦时没有正确给KeyBoard.Id赋值，修改输入框代码如下：

<input @bind-Value="ViewModel.Username" @onfocus='()=>KeyBoard.Id="loginusername"' id="loginusername"  />

• 手动触发的事件配置错误
  Blazor默认@bind-Value监听input事件实现值的实时同步，你当前触发的change事件仅会在输入框失焦时触发绑定更新，同时创建事件时未开启冒泡配置，Blazor的全局事件代理无法捕获到你手动触发的事件。
  修改JS代码如下：

function WriteInput(elementId, letter) {
var myElement = document.getElementById(elementId);
myElement.value = letter.toLowerCase();
// 触发input事件，开启冒泡、可取消配置适配Blazor事件监听逻辑
myElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
// 若需要同步触发失焦时的change绑定逻辑，可额外加下一行代码
// myElement.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
return true;
}

• 异步事件方法返回值不规范
  你当前键盘组件的OnClick方法返回值为async void，Blazor框架不会追踪async void方法的执行状态，方法执行完成后无法自动触发组件重渲染校验，需要修改为async Task，也可以额外调用StateHasChanged()强制刷新绑定：

private async Task OnClick(string letter)
{
    await _FocusService.WriteInput(KeyBoard.Id, letter);
    StateHasChanged();
}

内容的提问来源于stack exchange，提问作者Lachevre