I want to create a components by following this steps:

  • 我有一张商品 list .
  • I want to loop in this list and create a component like InputNumber.
  • EventCallback添加到接受这Inputtext中的ref的泛型创建的InputNumber中,因为我想使用这ref来将焦点设置在这InputNumber上.
  • I have also onblure method that execute some code for me, and I am using the onfocus to return focus to the input after execute this code by onblure

My question
How can I get this ref and send it as parameter of EventCallback?
The problem here that this components have been generated by loop, so I don't want to create by hand hundred variables to represent ref's.
My concept code like this:

@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>
}

If you see up the parameter InputNumber<double?> obj, this way is wrong, usually I use @ref=SomeVariable but becasue I created in generic way, I can not do that.

Note:

我不需要将我的列表调整为dictionary<MYItemType,InputNumber<double?>>,或者创建一个将InputNumber<double?>作为属性的新类.我正在寻找不同的方式,比如从editcontext 到任何输入都被修改并重新设置焦点,我不知道这是否可能!

推荐答案

您可以向模型类添加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; }
    }
}

Credits to user 100 for suggesting this solution in a different question on stackoverflow.

Csharp相关问答推荐

Should. ThrowAsynock未捕获来自httpClient. GetAsynock()请求的异常

单元测试和MOQ,最佳解决方案

Rx.Net -当关闭序列被触发时如何聚合消息并发出中间输出?

总是丢弃返回的任务和使方法puc无效之间有区别吗?

如何使用C#中的图形API更新用户配置文件图像

处理. netstandard2.0项目中HttpClient.SslProtocol的PlatformNotSupportedException问题""

无法解析数据库上下文的服务

为什么将鼠标悬停在DateTimeOffset上只显示Hour值?

REST API端点中异步后台代码执行的类型

MongoDB.NET-将数据绑定到模型类,但无法读取整数值

C#带主体的主构造函数?

使用Dapper映射联接查询对象数据到使用SplitOn;

委托RequestDelegate不带2个参数-ASP.NET Core 8最小API

当使用Dapper映射DBNull时,我可以抛出异常吗?

如何使用用于VS代码的.NET Maui扩展在我的iOS/Android设备或模拟器上进行调试?

如何从非异步任务中正确返回TypeResult

EF Core 7-忽略模型绑定中的虚拟属性

C#中COM对象的实际地址

当要删除的子模型没有父模型的1:多属性时,如何告诉实体框架设置1:1 FK条目?

使用postman 测试配置了身份的.NET 6应用程序