自定义MudTimePicker组件选中时间无法在父组件同步显示问题

核心问题分析 #

你遇到的两个问题本质都是自定义组件双向绑定实现不规范，以及MudDataGrid编辑模板中组件生命周期/内部逻辑导致的重复回调：

1. 父组件无法同步自定义组件值：未正确实现双向绑定的同步逻辑，导致外部值无法接收内部变更
2. DataGrid中HandleTimeChange两次触发：MudBlazor在编辑状态切换时会触发额外组件更新，加上自定义组件未做值相等判断，导致无效回调

解决方案 #

1. 正确实现双向绑定的自定义TimePicker

先封装基础版自定义组件，确保双向绑定正常，同时统一设置AutoClose=false：

@typeparam T where T : struct, IComparable, IComparable<T>, IConvertible, IEquatable<T>, IFormattable

<MudTimePicker T="T"
               AutoClose="false"
               Value="@TimeValue"
               ValueChanged="@HandleValueChanged"
               @bind-Text="@Text"
               Placeholder="@Placeholder" />

@code {
    [Parameter] public T? TimeValue { get; set; }
    [Parameter] public EventCallback<T?> TimeValueChanged { get; set; }
    [Parameter] public string? Placeholder { get; set; }
    [Parameter] public string? Text { get; set; }
    [Parameter] public EventCallback<string> TextChanged { get; set; }

    private async Task HandleValueChanged(T? newValue)
    {
        // 仅当值真正变化时触发外部回调，避免重复调用
        if (!EqualityComparer<T?>.Default.Equals(TimeValue, newValue))
        {
            await TimeValueChanged.InvokeAsync(newValue);
        }
    }
}

这个版本通过EqualityComparer判断值是否真的变更，避免无意义的回调，严格遵循Blazor双向绑定的参数传递逻辑，解决父组件无法同步值的问题。

2. 解决MudDataGrid编辑模板中的重复回调问题

如果需要自定义确认逻辑（比如手动点击Ok按钮提交值），可以改用内部缓存值+确认提交的方式，彻底避免DataGrid内部逻辑导致的重复触发：

@typeparam T where T : struct, IComparable, IComparable<T>, IConvertible, IEquatable<T>, IFormattable

<MudCard Style="width: 300px;">
    <MudTimePicker T="T"
                   AutoClose="false"
                   Value="@_internalValue"
                   ValueChanged="@HandleInternalChange"
                   @bind-Text="@Text"
                   Placeholder="@Placeholder" />
    <MudCardActions Class="justify-end">
        <MudButton OnClick="@Confirm" Color="Color.Primary" Variant="Variant.Filled">确认</MudButton>
        <MudButton OnClick="@Cancel" Variant="Variant.Outlined">取消</MudButton>
    </MudCardActions>
</MudCard>

@code {
    [Parameter] public T? TimeValue { get; set; }
    [Parameter] public EventCallback<T?> TimeValueChanged { get; set; }
    [Parameter] public string? Placeholder { get; set; }
    [Parameter] public string? Text { get; set; }
    [Parameter] public EventCallback<string> TextChanged { get; set; }

    private T? _internalValue;

    protected override void OnParametersSet()
    {
        // 同步外部传入的值到内部缓存，避免初始化或外部值更新时的不一致
        if (!EqualityComparer<T?>.Default.Equals(_internalValue, TimeValue))
        {
            _internalValue = TimeValue;
        }
        base.OnParametersSet();
    }

    private void HandleInternalChange(T? newValue)
    {
        // 仅更新内部缓存，不直接触发外部回调
        _internalValue = newValue;
    }

    private async Task Confirm()
    {
        // 确认时才将内部值同步到外部
        if (!EqualityComparer<T?>.Default.Equals(TimeValue, _internalValue))
        {
            await TimeValueChanged.InvokeAsync(_internalValue);
        }
    }

    private void Cancel()
    {
        // 取消时重置内部值为外部原始值
        _internalValue = TimeValue;
    }
}

在MudDataGrid中使用时，直接用双向绑定即可：

<MudDataGrid T="YourModel" Items="@yourDataSource" EditMode="EditMode.Cell">
    <Columns>
        <PropertyColumn Property="x => x.ScheduleTime" Title="计划时间">
            <EditTemplate>
                <CustomTimePicker T="TimeSpan"
                                  @bind-TimeValue="@context.Item.ScheduleTime"
                                  Placeholder="选择时间" />
            </EditTemplate>
        </PropertyColumn>
    </Columns>
</MudDataGrid>

关键注意事项 #

• 始终用EqualityComparer判断值是否变更，避免Blazor组件重渲染导致的无效回调
• 在OnParametersSet中同步内外值，确保组件初始化或外部值更新时内部状态一致
• 自定义确认逻辑时，将内部值变更和外部回调解耦，仅在用户确认时提交值，彻底规避DataGrid内部的额外触发

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