Blazor 服务器 - Fluent UI - 将焦点设置到 FluentDatePicker

如果我尝试使用 FluentDatePicker 执行相同操作，我会在控制台中收到此错误：

ElementReference 尚未正确配置。

这似乎是一个已知问题，目前我们无法像 FluentTextField 那样引用 FluentDataPicker。

那么，问题是：如何将焦点从代码设置到 FluentDatePicker？

您可以参考以下示例使用 JavaScript 方法设置焦点：

1. 在App.razor页面中添加JavaScript脚本：

    <script>
        function focusFluentDatePicker(elementId) {
            const datePicker = document.getElementById(elementId);
            if (datePicker) {
                datePicker.focus(); //set focus.
                datePicker.click(); //show the date picker calendar.
            }
        }
    </script>
   

2. 在主组件中，使用 FluentButton@onclick事件设置焦点：

    @page "/fluentui"
    @rendermode InteractiveServer   
    @inject IJSRuntime JSRuntime
    <h3>FluentUI</h3> 
    <div style="display:flex">
        <FluentButton @onclick="() => focusTest!.FocusAsync()">FocusAsync</FluentButton>
        <FluentTextField @ref="focusTest" @bind-Value=value></FluentTextField>
    </div>
    <div style="display:flex"> 
        <FluentButton @onclick="SetFocus" >Focus Date Picker Async</FluentButton>
        <FluentDatePicker @ref="datePicker" @bind-Value="@SelectedValue" 
            id="myDatePicker" />
    </div>
        <p>
            Selected Date: @(SelectedValue?.ToString("yyyy-MM-dd"))
        </p>
    @code
    {
        FluentTextField? focusTest; 
        FluentDatePicker? datePicker;
        string? value;
        private DateTime? SelectedValue = DateTime.Today.AddDays(-2); //default date 
        private async void SetFocus()
        {
            var id = this.datePicker.Id; //get the DataPicker id attribute.
            await JSRuntime.InvokeVoidAsync("focusFluentDatePicker", id);
        }
    }
   

运行应用程序后，单击 FocusDataPickerAsync 按钮，结果如下：它将聚焦日期选择器并打开日历，如果您不想打开日历，请删除datePicker.click();。