本文介绍了Blazor中有条件创建的元素的ElementReference的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将焦点设置为有条件呈现的输入控件。我正在设置ElementReference，但它的ID和上下文都为空。
<button @onclick="ToggleInput">Show input</button>
@if(showInput) {
<input @ref="inputRef" type="text"/>
}
@code {
private ElementReference inputRef;
private bool showInput;
async void ToggleInput() {
showInput = !showInput;
await inputRef.FocusAsync();
}
}
当我按下按钮时，它在控制台中显示此错误：
System.InvalidOperationException：ElementReference配置不正确
完整错误消息：
出现错误的工作示例https://blazorrepl.com/repl/wbueaMPK28hf2NNv09
推荐答案
这似乎可以工作，并且不必是单独的组件。我把它贴在起始页上了。
<button @onclick="ToggleInput">Show input</button>
@if (showInput)
{
<input @ref="inputRef" type="text" />
}
@code {
private ElementReference inputRef;
private bool showInput;
protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (showInput) await inputRef.FocusAsync();
}
void ToggleInput()
{
showInput = !showInput;
}
}
这篇关于Blazor中有条件创建的元素的ElementReference的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！