Blazor中有条件创建的元素的ElementReference

ElementReference to conditionally created element in Blazor(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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！