如何解决MudBlazor DatePicker自定义EventCallback重复触发问题？

问题背景 #

在Web应用中使用MudBlazor DatePicker组件时遇到以下问题：

• 使用@bind-Date双向绑定InternalDate时功能正常，但无法在InternalDate变更时触发自定义逻辑；
• 改用Date绑定+DateChanged回调，或在InternalDate属性的setter中触发自定义EventCallback<DateTime?>时，通过日历选择日期正常，但手动编辑文本框时会导致回调被触发两次（一次正确新值，一次旧值）；
• 移除DateFormat和Mask可消除重复触发，但这并非可行方案，需要保留这两个属性。

相关代码示例 #

使用@bind-Date的代码 #

<MudDatePicker
    Editable="true"
    @bind-Date="@InternalDate"
    Clearable=true           
    DateFormat="@CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern"
    Mask="@(new DateMask(CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern))" />

使用Date和DateChanged的代码 #

<MudDatePicker
    Editable="true"
    Date="@InternalDate"
    DateChanged="InternalDateChanged"
    Clearable=true           
    DateFormat="@CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern"
    Mask="@(new DateMask(CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern))" />

InternalDate属性代码 #

private DateTime? InternalDate 
{
    get => Value;
    set {
        Value = value;
        ValueChanged.InvokeAsync(value);
    }
}

解决方案 #

方法1：利用@bind-Date:after（推荐，Blazor 6+支持） #

Blazor 6及以上版本支持@bind-{Property}:after语法，可在双向绑定完成后触发自定义逻辑，自动过滤中间无效值的变更：

<MudDatePicker
    Editable="true"
    @bind-Date="@InternalDate"
    @bind-Date:after="OnDateChanged"
    Clearable=true           
    DateFormat="@CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern"
    Mask="@(new DateMask(CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern))" />

对应的处理方法：

private async Task OnDateChanged()
{
    // 此处InternalDate已为最新值，执行你的自定义逻辑
    await ValueChanged.InvokeAsync(InternalDate);
    // 其他自定义操作...
}

方法2：在回调中过滤重复值 #

修改DateChanged回调方法，仅当新值与当前值不一致时执行逻辑：

private async Task InternalDateChanged(DateTime? newValue)
{
    // 过滤重复值，避免无效触发
    if (newValue == InternalDate) return;
    
    InternalDate = newValue;
    await ValueChanged.InvokeAsync(newValue);
    // 自定义逻辑...
}

方法3：优化属性Setter逻辑 #

在InternalDate的setter中增加值比较，仅当值真正变化时更新并触发回调：

private DateTime? _internalDate;
private DateTime? InternalDate 
{
    get => _internalDate;
    set {
        // 忽略重复赋值
        if (_internalDate == value) return;
        
        _internalDate = value;
        Value = value;
        await ValueChanged.InvokeAsync(value);
    }
}

方法4：防抖处理（应对快速输入场景） #

如果输入过程中仍有频繁触发的情况，可增加防抖逻辑，确保输入完成后再执行操作：

private CancellationTokenSource _debounceCts;

private async Task InternalDateChanged(DateTime? newValue)
{
    _debounceCts?.Cancel();
    _debounceCts = new CancellationTokenSource();
    
    try
    {
        // 等待300ms确认输入完成
        await Task.Delay(300, _debounceCts.Token);
        
        if (newValue != InternalDate)
        {
            InternalDate = newValue;
            await ValueChanged.InvokeAsync(newValue);
            // 自定义逻辑...
        }
    }
    catch (TaskCanceledException)
    {
        // 忽略取消的任务
    }
}

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