如何为Razor组件中遍历列表生成的每个InputText实现独立数据绑定

这个问题很常见——你现在所有的输入框都绑定到了同一个inputText变量，不管你在哪个输入框里输入内容，所有框都会同步显示这个值，点击按钮自然也只会拿到这同一个值。要解决这个问题，我们需要给每个列表项单独分配一个绑定的变量，具体做法如下：

核心思路 #

创建一个自定义数据类，用来存储每个列表项的原始文本和对应的独立输入值，让每个输入框绑定到对应实例的专属属性上，而不是共享的单一变量。

修改后的完整代码 #

@page "/questions"

<ul>
    @foreach(var item in itemList)
    {
        <li>
            @item.OriginalText 
            <InputText @bind-Value="@item.InputValue" />
            <button @onclick="() => Display(item)">Display</button>
        </li>
    }
</ul>

@code {
    // 定义自定义类，每个实例包含原始文本和独立的输入值
    public class ListItemWithInput
    {
        public string OriginalText { get; set; }
        public string InputValue { get; set; } = string.Empty;
    }

    // 初始化自定义类型的列表，每个项都有自己的输入值存储空间
    private List<ListItemWithInput> itemList = new List<ListItemWithInput>()
    {
        new ListItemWithInput { OriginalText = "Hello" },
        new ListItemWithInput { OriginalText = "World" }
    };

    void Display(ListItemWithInput item)
    {
        // 这里可以拿到当前项的专属原始文本和输入值
        var result = $"{item.OriginalText} 对应的输入内容：{item.InputValue}";
        // 可根据需求替换为弹窗、日志或其他业务逻辑
        Console.WriteLine(result);
    }
}

关键修改点说明 #

• 自定义数据类：ListItemWithInput类为每个列表项提供了独立的InputValue属性，彻底避免了变量共享的问题。
• 独立绑定：每个InputText组件绑定到item.InputValue，确保输入操作只会影响当前项的数值。
• 传递当前项：按钮的点击事件通过lambda表达式() => Display(item)把当前列表项传递给Display方法，这样就能精准获取对应项的输入内容。

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