如何避免Blazor Razor组件中filterTerm重复声明导致的重置问题

问题根源 #

你遇到的问题核心是：Input对象在组件每次渲染（比如点击按钮触发状态变更时）被重复声明/实例化，导致绑定的filterTerm失去之前的输入值，被重置为空字符串。

解决方案 #

1. 将Input对象声明为组件的类级字段 #

不要在组件的渲染代码块（如@code内的局部代码、渲染逻辑块）重复声明Input，而是把它作为组件类的成员变量，确保组件重新渲染时不会重新初始化它：

@page "/user-management"

<input type="text" @bind="Input.FilterTerm" placeholder="输入筛选关键词" />
<button @onclick="HandleFilter">Filter</button>

@code {
    // 声明为组件类字段，仅初始化一次
    private InputModel Input { get; set; } = new InputModel();

    private void HandleFilter()
    {
        // 使用Input.FilterTerm执行筛选逻辑
        Console.WriteLine($"当前筛选关键词: {Input.FilterTerm}");
    }

    // 定义输入模型类
    public class InputModel
    {
        public string FilterTerm { get; set; } = string.Empty;
    }
}

2. 移除渲染上下文内的重复初始化代码 #

如果之前是在@{}这类渲染逻辑块里每次都实例化Input对象（如下错误写法），必须删除这段代码，改用类级字段声明：

// 错误示例：每次渲染都会重新创建Input实例，导致值重置
@{
    var Input = new InputModel();
}

3. 用生命周期方法控制初始化时机（可选） #

如果需要更精准控制Input对象的初始化时机，可以在组件生命周期方法中完成初始化：

@code {
    private InputModel Input { get; set; }

    protected override void OnInitialized()
    {
        Input = new InputModel();
        base.OnInitialized();
    }

    // 其他业务代码...
}

通过以上方式，Input对象会在组件生命周期内仅被初始化一次，点击Filter按钮触发组件重新渲染时，filterTerm的值不会被重置，输入框内容也能正常保留。

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