Blazor Server数值输入框超出范围时恢复上次有效值的实现方法

需求：为数值输入字段设置1-4的范围，当输入值超出范围时，输入框立即恢复到上次的有效值（而非设置为极限值）。

修改步骤： #

1. 添加变量存储上次有效值
   在组件中声明变量，用于记录每次的有效输入值，初始化时同步初始值：

// 保存上次的有效输入值
private int _lastValidNC_VAR_index;

protected override void OnInitialized()
{
    // 初始化时从服务获取初始有效值
    _lastValidNC_VAR_index = TagService.NC_VAR_index[index_];
    NC_VAR_index = _lastValidNC_VAR_index;
}

2. 调整输入框绑定方式
   将自动绑定@bind改为手动绑定value，避免自动更新导致的冲突：

<td>
    <input type="text" inputmode="numeric" 
           value="@NC_VAR_index" 
           @onchange="@check_NC_VAR_index" />
</td>

3. 重写校验逻辑
   在校验方法中先解析输入值，判断是否在有效范围内，无效则恢复上次有效值并触发组件渲染：

protected void check_NC_VAR_index(ChangeEventArgs e)
{
    // 解析输入的新值
    if (int.TryParse(e.Value?.ToString(), out int newValue))
    {
        // 检查是否在1-4的有效范围内
        if (newValue >= 1 && newValue <= 4)
        {
            // 有效：更新值并记录为新的有效值
            NC_VAR_index = newValue;
            TagService.NC_VAR_index[index_] = newValue;
            _lastValidNC_VAR_index = newValue;
        }
        else
        {
            // 无效：恢复到上次有效值并触发渲染
            NC_VAR_index = _lastValidNC_VAR_index;
            StateHasChanged();
        }
    }
    else
    {
        // 输入非有效数字时也恢复上次有效值
        NC_VAR_index = _lastValidNC_VAR_index;
        StateHasChanged();
    }
}

说明： #

• 手动绑定value可以精确控制输入框显示的内容，避免自动绑定带来的即时更新。
• StateHasChanged()用于强制组件重新渲染，确保输入框在无效输入后立刻显示上次有效值。
• 增加了非数字输入的处理，避免解析失败导致的异常。

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