对 Blazor 中按条件创建的元素的 ElementReference答案

【问题标题】：ElementReference to conditionally created element in Blazor对 Blazor 中按条件创建的元素的 ElementReference
【发布时间】：2021-07-04 13:50:46
【问题描述】：

我正在尝试将焦点设置为有条件呈现的输入控件。我正在设置 ElementReference 但它的 id 和 context 都是空的。

<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的工作示例

【问题讨论】：

您可以使用? 将其设置为可选所以await inputRef?.FocusAsync()？或者只是包装一个空检查
是的，但是这个参考永远不会被设置，我想知道我必须做些什么才能让它工作。
@MiltoxBeyond，ElementReference 永远不会为空，因为它是 struct。

标签： c# asp.net blazor blazor-webassembly

【解决方案1】：

这也不是完美的解决方案，更像是一种解决方法，但以下方法对我有用：

<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;
        StateHasChanged();
        
        await Task.Run(() =>
        {
            if(inputRef.Context != null) inputRef.FocusAsync();
        });
    }
}

在我的测试中，上下文永远不会为空，因此它可能不需要检查。但我更喜欢不设置焦点，而不是抛出异常。

【讨论】：

【解决方案2】：

这似乎有效，不必是一个单独的组件。我把它贴在起始页上。

<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;
    }
}

【讨论】：

效果很好，谢谢！

【解决方案3】：

将输入框移动到另一个组件。然后你可以挂钩到组件的生命周期，并在它渲染后调用.FocusAsync。

https://blazorrepl.com/repl/cluoEsvU59fl8zYM22

【讨论】：

请考虑在此处放置您拥有的任何代码而不是链接；我知道我的工作防火墙/代理阻止了这个站点的 dll，我看不到实际发布的内容，其他人可能有同样的问题。