引用循环创建的组件答案

【问题标题】：refer to components that created by loop引用循环创建的组件
【发布时间】：2022-09-22 20:52:00
【问题描述】：

我想按照以下步骤创建组件：

我有一个项目清单。
我想在这个列表中循环并创建一个像InputNumber 这样的组件。
将EventCallback 添加到接受此Inputtext 的ref 的泛型创建的InputNumber 中，因为我想使用此ref 将焦点设置在此InputNumber 上。
我还有onblure 方法可以为我执行一些代码，我使用onfocus 在onblure 执行此代码后将焦点返回到输入

我的问题我怎样才能得到这个ref 并将其作为EventCallback 的参数发送？
这里的问题是这个组件是循环生成的，所以我不想手动创建一百个变量来代表ref\'s。
我的概念代码是这样的：

@code{
  private void OnFocus(MyInputNumber<double?> obj)
  {
     if (obj is not null)
     {
       obj!.Element.Value.FocusAsync();
     }
  }
}
@foreach(var MyItem in MyList)
{
  <EditForm Model=\"MyItem\">
    //Some components ..
    <label>
        Test
        <InputNumber @bind-Value=\"MyItem.MyVal\"
         @onfocus=\"@((InputNumber<double?> obj @*wrong*@) =>  
    OnFocus(obj))\"
    @onblur=@(() => OnblureHandler(context))
    </label>
 </EditForm>
}

如果你看到参数InputNumber<double?> obj，这种方式是错误的，通常我使用@ref=SomeVariable，但是因为我是用通用方式创建的，所以我不能这样做。
笔记：
我不会将我的列表调整为dictionary<MYItemType,InputNumber<double?>>，我正在寻找另一种方式！

当InputNumber 专注时，你想关注什么？
@DimitrisMaragkos，感谢您查看问题，实际上我有另一种方法Onblure 与OnFocus 一起使用，我想再次将焦点返回到输入！

标签： c# asp.net-core blazor blazor-server-side

【解决方案1】：

您可以将InputNumber<double?> InputNumberRef { get; set; } 属性添加到您的模型类。然后是 foreach 循环将它绑定到组件引用@ref="MyItem.InputNumberRef" 然后你可以在你的回调方法@onblur="() => HandleBlur(MyItem.InputNumberRef)" 中传递它。

这是我使用的演示代码。以下代码在输入onblur 事件后等待 2 秒并将焦点返回到输入。

@page "/"

@foreach (var item in _items)
{
    <EditForm Model="@item">
        <InputNumber class="form-control" @ref="@item.InputNumberRef" @bind-Value="@item.Value" @onblur="() => HandleBlur(item.InputNumberRef)" />
    </EditForm>
}

@code {

    private List<Item> _items = new List<Item>
    {
        new Item { Value = 10 },
        new Item { Value = 30 },
        new Item { Value = 20 },
    };

    private async Task HandleBlur(InputNumber<int> inputNumberRef)
    {
        if (inputNumberRef.Element.HasValue)
        {
            await Task.Delay(2000);
            await inputNumberRef.Element.Value.FocusAsync();
        }
    }

    public class Item
    {
        public int Value { get; set; }
        public InputNumber<int> InputNumberRef { get; set; }
    }
}

感谢用户 @enet 在 stackoverflow 上的另一个问题中建议此解决方案。

【讨论】：