Blazor中如何获取值变更的输入框所在表格单元格的索引？

数据老陈

2026-8-8

解决Blazor输入框变更时获取对应索引的问题

要实现获取变更输入框的索引并更新对应Data列表元素，你可以按以下步骤修改代码：

1. 替换遍历方式，带上索引

原来的foreach无法直接获取元素索引，改用for循环（能明确每个输入框对应的索引值，还能避免Blazor的循环变量捕获问题）：

<table>
    <tr>
        <th>X2</th>
        @for (int i = 0; i < Data.Count; i++)
        {
            var index = i;
            <td>
                <input type="number" min="0" max="360" step="1" 
                       @onchange="(e) => ItemChanged(e, index)"
                       value="@Data[index]" />
            </td>
        }
    </tr>
</table>

2. 修改`ItemChanged`方法，接收索引参数

更新方法签名，添加索引参数，用该索引定位到Data列表中对应的元素：

@code {
    public List<double> Data = new List<double>{1.2, 0.5, 0.8, 1.4};
    
    public void ItemChanged(ChangeEventArgs args, int index)
    {
        if (double.TryParse(args.Value?.ToString(), out var newValue))
        {
            Data[index] = newValue;
            // 若修改后UI未自动更新，可手动调用以下方法通知组件渲染
            // StateHasChanged();
        }
    }
}