asp.net 元素对Blazor中有条件创建的元素的引用

nom7f22z  于 2022-11-26  发布在  .NET
关注(0)|答案(4)|浏览(119)

我正在尝试将焦点设置到有条件呈现的输入控件。我正在设置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();
    }
}

当我按下按钮时,它在控制台中显示此错误:
系统操作无效异常:未正确配置ElementReference
完整的错误消息:

错误为https://blazorrepl.com/repl/wbueaMPK28hf2NNv09的工作示例

daolsyd0

daolsyd01#

这似乎是工作,并不一定是一个单独的组件。我把它的权利,在开始页。

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

dtcbnfnu2#

将输入框移到另一个组件上,然后可以挂钩到组件的生命周期中,并在呈现后调用.FocusAsync
https://blazorrepl.com/repl/cluoEsvU59fl8zYM22

sqougxex

sqougxex3#

这也不是一个完美的解决方案,更像是一个变通方案,但以下方法对我很有效:

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

在我的测试中,上下文从来都不是空的,所以它可能不需要检查。但是我更喜欢不设置焦点,而不是抛出异常。

rkkpypqq

rkkpypqq4#

一个稍微干净一点的解决方案:

<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 InvokeAsync(StateHasChanged);
        await inputRef.FocusAsync();
    }
}

相关问题