放弃控制的问题

Question

我在使用Blazor Webassembly时遇到了一个奇怪的问题。我有一个组件，它有两个文本框。出于某种原因，如果我在第一个文本框中键入任何内容，然后尝试制表到第二个文本框或单击第二个文字框，我必须做两次。这就像第一个选项卡或单击没有注册一样。在玩了一番之后，我能够尽量减少重复这个问题。当我在控件上同时绑定了模型并且使用了@ref属性时，似乎会出现这个问题。

这是我的.cshtml文件：

@inject IJSRuntime JsRuntime
@page "/"

<div>
<input class="form-control" id="first-text-box" type="text" @ref="TextBoxControl" @bind="_model.Box1" />
</div>
<div>
<input class="form-control" id="second-text-box" type="text" @bind="_model.Box2" />
</div>

@code {
private ElementReference TextBoxControl { get; set; }
private readonly BoxClass _model = new BoxClass();
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JsRuntime.InvokeVoidAsync("jsFunctions.focusElement", TextBoxControl);
await base.OnAfterRenderAsync(firstRender);
}
}

这里是focusElementjavascript函数：

window.jsFunctions = {
focusElement: function(element) {
element.focus();
}
};

最后，这里有一个问题的Fiddle现场直播：https://blazorfiddle.com/s/kph6msiv

就像我说的，只需在第一个文本框中键入一些内容，然后尝试制表或单击下一个文本框，你就会发现你需要做两次。

Answer 1

每次渲染时都会集中注意力，这在Blazor数据绑定时发生，在退出控件时发生。

相反，只有当firstRender是true时，才调用您的JavsScript