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

Question

我可以将焦点设置到 FluentTextField:

• 使用@ref：

  @ref=myFluentTextField

• 将其声明为 FluentTextField： 流畅的文本字段？名称FluentTextField；

• 设置焦点：

  protected override void OnAfterRender(bool firstRender) { nombreFluentTextField?.FocusAsync(); }

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

ElementReference 尚未正确配置。

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

非常感谢，再见...

Answer 1

如果我尝试对 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. 在 Main 组件中，使用 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();

。