将焦点放在Blazor元素上

Question

我使用的是Blazor的服务器版本，在下面的例子中我出现了这个错误：

"此时无法发出JavaScript互操作调用。这是因为组件是静态渲染器。启用预呈现后，JavaScript互操作调用只能在OnAfterRenderAsync生命周期方法期间执行">

File .razor:
<RadzenTabs SelectedIndex="0" Change=@(args => OnChangeRadzenTab(args))>
File.cs:
async void OnChangeRadzenTab(int value)
{
switch (value)
{
case 0:
await jsRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""NameOfField"").focus()");
break;

但在接下来的一个中，代码运行了。为什么会有这些行为上的差异？

File .razor:
<RadzenMask Mask="**/**/****" Pattern="[^0-9]" Name="EndDate" Id="EndDate"
@bind-Value=@EndDate  @onfocusout=@(args => OnFocusOutEndDate(args)) /> 
File.cs:
async void OnFocusOutEndDate(FocusEventArgs? value)
{
if (!LibB.CheckDate(EndDate))
{
await jsRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""EndDate"").focus()");
Error = true;
}
}   

Answer 1

我猜您已经将第一个放在了@if或@foreach块中，而第二个不在条件块中。或者第一个Radzen控件正在以这种方式创建子控件，并且它们在渲染期间调用EventCallback。

无论如何，我对这个问题的解决方案是遵循错误消息并推迟JavaScript:

bool NeedFocusChange;
async Task OnFocusOutEndDate(FocusEventArgs? value) 
{
if (!LibB.CheckDate(EndDate))
NeedFocusChange = true;
} 
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (NeedFocusChange)
{
await jsRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""EndDate"").focus()");
Error = true;
NeedFocusChange = false;
}
}

我不知道RadzenControls，但如果你能得到一个@ref到"；结束日期"；组件，您可以使用新的(.net 5(FocusAsync，但它仍然在后台使用JavaScript，我认为：

https://www.youtube.com/watch?v=lLypM7oBwyA