Blazor中如何获取for循环生成的文本框值并在@onblur事件中显示到span

核心问题说明 #

你原有代码的问题主要有3点：

• Getvalue方法没有传入当前输入框的索引，无法识别是哪个输入框触发了失焦事件
• 单个Textboxvalue变量无法对应4个输入框的独立值，会导致所有span显示内容一致
• transactionModels是集合类型，不能直接访问transactionModels.Amount，需要通过索引获取对应项的属性值

完整实现代码 #

<EditForm EditContext="@EditContext">
    <DataAnnotationsValidator />
    @for (int j = 0; j < transactionModels.Count; j++)
    {
        @* 捕获循环内的局部索引，避免闭包问题 *@
        int i = j;  
        <input type="text" class="form-control" 
               @bind="transactionModels[i].Amount" 
               @onblur="() => HandleBlur(i)"
               placeholder="请输入金额" />
        @* 直接绑定对应索引的模型属性，失焦后值已同步到模型，直接显示即可 *@
        <span>@transactionModels[i].Amount</span>
    }
</EditForm>

@code {
    // 表单上下文
    private EditContext EditContext { get; set; }
    // 绑定的模型集合，初始化4个空项对应4个文本框
    private List<TransactionModel> transactionModels { get; set; } = new();

    // 模型定义
    public class TransactionModel
    {
        public string Amount { get; set; }
    }

    protected override void OnInitialized()
    {
        // 初始化4个文本框对应的模型实例
        transactionModels = Enumerable.Range(0, 4).Select(_ => new TransactionModel()).ToList();
        EditContext = new EditContext(transactionModels);
    }

    /// <summary>
    /// 失焦事件处理方法，接收当前输入框的索引
    /// </summary>
    private void HandleBlur(int index)
    {
        // 获取当前输入框的值
        var currentInputValue = transactionModels[index].Amount;
        // 这里可以写你自定义的存储逻辑，比如存到字典、其他变量里做后续处理
        // 示例：Dictionary<int, string> savedValues = new();
        // savedValues[index] = currentInputValue;
    }
}

补充说明 #

• Blazor的@bind默认绑定onchange事件，本身就是在输入框失焦时才同步值到模型，刚好符合你失焦才捕获值的需求，如果需要实时同步可以加配置@bind:event="oninput"
• 如果不需要额外的失焦处理逻辑，甚至可以不用写@onblur绑定，直接把span绑定到transactionModels[i].Amount就能实现失焦后显示值的效果

内容的提问来源于stack exchange，提问作者Sridhar