使用 @ref 将焦点放在动态生成的 InputNumber 上

Question

我创建了一组 InputNumber foreach

private InputNumber<double?> OnfocusRef; //This should be dynmic but I don't know how!!!
@foreach(employee in Employees){
{
 <EditForm Model="employee">

   <InputNumber @bind-Value="employee.Monday" @ref="OnfocusRef" 
    @onfocus=@(() => OnfocusHandler(employee))

   // other inputNumbers with rest days of the week (Tuesday, Wednesday ..) ....
 </EditForm>
}

渲染代码后，我得到了一行输入天数的每个员工，如下所示：

通过使用tab，用户可以在输入框之间移动，如果用户跳转到下一行，我必须保存上一行的更改，因为它是不同的员工。

private FocusedEmployee {get; set;}
private async Task OnfocusHandler(Employee employee)
{
 //first lading of the page
 if(FocusedEmployee is null)
 {
   FocusedEmployee  = employee;
 }
 //jump to next row
 else if(FocusedEmployee.Id != employee.Id)
 {
  await UpdateEmployee(FocusedEmployee)
  if(OnfocusRef.Element.HasValue)
   {
    // Problem here!
    await OnfocusRef.Element.Value.FocusAsync();
   }
   else { 
    FocusedEmployee= employee;
   }
 }
}

我的问题：pre Employee每次保存后如何设置焦点到当前Employee的第一个输入框？我必须循环并创建一个 EditForm 列表，每个 EditForm 都有一个 InputRadio 列表，我的 @ref 问题不再是唯一的 !

Answer 1

您可以动态处理引用：

@foreach (var t in PotatosAndReferences)
{
    <input type="text" @key="@t.Potato.Id" @bind="t.Potato.Name" @ref="@t.Ref" />
}
<br>
<button @onclick="_ => GoN(0)">Focus first</button>
<button @onclick="_ => GoN(15)">Focus 16</button>
@code {
    public class Potato
    {
        public int Id {get; set; }
        public string Name {get; set;} = default!;
    }  
    public class PotatoAndReference
    {
        public Potato Potato {get; set;} = default!;
        public ElementReference? Ref {get; set;} = null;
    }
    public List<Potato> Potatos
        = 
        Enumerable.Range(1, 50)
        .Select(i => new Potato() {Id = i, Name = $"Potato {i}"}).ToList();
    public List<PotatoAndReference> PotatosAndReferences = default!;
    protected override void OnInitialized()
        =>
        PotatosAndReferences =
            Potatos
            .Select(p => new PotatoAndReference(){Potato = p}).ToList();
    protected async Task GoN(int n)
        =>
        await PotatosAndReferences.ElementAt(n).Ref!.Value.FocusAsync();    
}

使用 @ref 将焦点放在动态生成的 InputNumber 上

Set focus on dynamic generated InputNumber by using @ref

c#

blazor

blazor-server-side

.net-6.0