Blazor：如何获取子组件MudTextField引用并在父页面加载时设焦点？

步骤1：子组件中暴露MudTextField引用 #

在子组件里定义MudTextField的实例引用，通过EventCallback将引用传递给父组件：

@* 子组件 ChildComponent.razor *@
<MudTextField @ref="_textFieldRef" Label="请输入内容" />

@code {
    private MudTextField<string>? _textFieldRef;

    // 定义回调参数，用于把文本框实例传给父组件
    [Parameter]
    public EventCallback<MudTextField<string>?> TextFieldRefChanged { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 首次渲染完成后，将文本框引用传递给父组件
            await TextFieldRefChanged.InvokeAsync(_textFieldRef);
        }
    }
}

步骤2：父组件接收引用并触发聚焦 #

父组件监听子组件传递的引用，在页面导航进入时调用聚焦方法：

@* 父组件 ParentPage.razor *@
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<ChildComponent TextFieldRefChanged="ReceiveTextFieldRef" />

@code {
    private MudTextField<string>? _childTextField;
    private IDisposable? _navigationListener;

    protected override void OnInitialized()
    {
        // 监听导航变化，确保每次进入当前页面都触发聚焦
        _navigationListener = NavigationManager.LocationChanged += HandleLocationChanged;
    }

    private async void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        // 替换为你的父页面路由，判断是否进入当前页面
        if (e.Location.EndsWith("/ParentPage"))
        {
            await Task.Delay(80); // 等待DOM渲染完成，避免空引用
            await _childTextField?.FocusAsync();
        }
    }

    private void ReceiveTextFieldRef(MudTextField<string>? textField)
    {
        _childTextField = textField;
    }

    // 清理导航监听
    public async ValueTask DisposeAsync()
    {
        _navigationListener?.Dispose();
    }
}

关键说明 #

• 使用OnAfterRenderAsync确保子组件的MudTextField已经完成渲染，再传递引用，避免空引用异常
• 监听LocationChanged事件是为了覆盖所有导航进入父页面的场景（包括从其他页面跳转、浏览器前进后退）
• 如果父组件是首次直接加载，也可以在自身的OnAfterRenderAsync中调用_childTextField?.FocusAsync()

内容的提问来源于stack exchange，提问作者Axium7