Blazor 8.0自定义InputDecimal组件双向绑定Value始终为0问题求助

你遇到的核心问题是组件内部值的变化没有正确同步到绑定的父组件字段，输入框显示正常是因为你只处理了值的展示，但没有触发双向绑定的回调更新父组件状态。结合Blazor 8.0的特性，以下是常见错误点和修复方案：

常见错误原因 #

1. 未触发ValueChanged回调：手动实现组件时，输入值变化后没有调用ValueChanged.InvokeAsync()通知父组件更新绑定字段。
2. 未同步父组件参数更新：父组件的Value变化时，组件内部状态没有同步，导致内部值与绑定字段脱节。
3. 缺少ValueExpression参数：Blazor双向绑定依赖该参数进行绑定跟踪，Blazor 8.0对其要求更严格，缺失会导致绑定失效。
4. 未使用官方基类：没有继承InputBase<decimal>，重复实现基础逻辑时容易遗漏关键步骤。

修复方案：推荐使用官方基类实现 #

直接继承Blazor内置的InputBase<decimal>是最规范、不易出错的方式，基类已封装所有双向绑定核心逻辑：

@inherits InputBase<decimal>

<input type="text" 
       class="form-control"
       value="@CurrentValueAsString" 
       @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />

@code {
    // 重写解析逻辑，处理字符串到decimal的转换
    protected override bool TryParseValueFromString(string? value, out decimal result, out string validationErrorMessage)
    {
        // 可根据需求添加格式处理，比如支持千分位、货币符号等
        if (decimal.TryParse(value?.Trim(), System.Globalization.NumberStyles.Any, System.Globalization.CultureInfo.CurrentCulture, out result))
        {
            validationErrorMessage = string.Empty;
            return true;
        }
        else
        {
            validationErrorMessage = "请输入有效的数字";
            return false;
        }
    }
}

手动实现的正确方式（不推荐，但需注意以下点） #

如果必须手动实现组件，确保覆盖所有双向绑定的关键环节：

<input type="text" 
       value="@_internalValue" 
       @onchange="OnInputChanged" />

@code {
    [Parameter]
    public decimal Value { get; set; }

    [Parameter]
    public EventCallback<decimal> ValueChanged { get; set; }

    // 必须添加该参数，Blazor双向绑定依赖它
    [Parameter]
    public Expression<Func<decimal>> ValueExpression { get; set; } = default!;

    private decimal _internalValue;

    // 同步父组件传来的Value到内部值
    protected override void OnParametersSet()
    {
        if (!EqualityComparer<decimal>.Default.Equals(_internalValue, Value))
        {
            _internalValue = Value;
        }
    }

    private async Task OnInputChanged(ChangeEventArgs e)
    {
        if (decimal.TryParse(e.Value?.ToString(), out var parsedValue))
        {
            _internalValue = parsedValue;
            // 必须触发回调，通知父组件更新绑定字段
            await ValueChanged.InvokeAsync(_internalValue);
        }
    }
}

关键注意事项 #

• 无论哪种实现方式，都要确保输入值变化时触发ValueChanged回调，这是双向绑定的核心。
• Blazor 8.0的Auto渲染模式下，组件生命周期的参数更新更严格，务必在OnParametersSet中同步内部状态。
• 优先使用InputBase<T>基类，它还内置了验证支持，能更好地兼容Blazor的表单系统。

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