父组件未显示在自定义 MudTimePicker 组件中选取的时间

Question

我想创建一个自定义

TimePickerComponent

并在我使用

MudTimePicker

的应用程序中的任何地方使用它。这是因为这样我就可以轻松地在任何地方配置

AutoClose=false

，将来也许还可以配置其他自定义选项。

<MudDatePicker @bind-Date="@deletedDate" Label="Delete Date" />
<MudTimePicker @bind-Time="@deletedTime" Label="Delete Time"/>

<TimePickerComponent @bind-TimeValue="@deletedTime" Label="Delete Time From Custom Component"/>

@code{
    public DateTime? deletedDate { get; set; }
    public TimeSpan? deletedTime { get; set; }
}

但是，父组件似乎无法显示我在

TimePickerComponent

组件中选择的时间。我在这里创建了一个 MudBlazor 片段：https://try.mudblazor.com/snippet/cYmIuiYpzoGHegIi。当我使用

MudTimePicker

选择时间时，

MudTimePicker

和

TimePickerComponent

都会显示所选时间。反之则不然。

我尝试过 MudBlazor 7.4 和 7.5 软件包，它们都显示相同的行为。

我预计我的配置方式有问题

TimeValueChanged EventCallBack

。

我还尝试定义一个

OnOkButtonClicked

函数，在其中调用

TimeValueChanged

异步。然而，这似乎也不起作用。

    private void OnOkButtonClicked()
    {
        TimeValueChanged.InvokeAsync();
        _picker.CloseAsync();
    }

谢谢你，

Answer 1

你不能这样做：

 @bind-Time=@TimeValue

您只是修改

TimeValue

的值，而不是调用外部回调。

这是组件的修改版本，可以正确连接内部绑定。

我已经删除了您的处理代码，因为在给定的示例中不需要它。 组件的处理由渲染器处理。

<MudTimePicker @ref="_picker" Time="this.TimeValue" TimeChanged="this.OnValueSet" Label="@Label" AutoClose="false">

    <PickerActions>

        <MudButton OnClick="this.Cancel">Cancel</MudButton>
        <MudButton Color="Color.Primary" OnClick="this.Ok">Ok</MudButton>

    </PickerActions>

</MudTimePicker>

@code {
    [Parameter] public TimeSpan? TimeValue { get; set; }
    [Parameter] public EventCallback<TimeSpan?> TimeValueChanged { get; set; }
    [Parameter] public string? Label { get; set; }

    private MudTimePicker? _picker;

    private async Task OnValueSet(TimeSpan? value)
        => await this.TimeValueChanged.InvokeAsync(value);

    private void Cancel()
        => _picker?.Close(false);

    private void Ok()
        => _picker?.Close();
}

Answer 2

您必须使用 EventCallback 来通知父级更改。 直接跨多个组件进行

@bind

并不是一个好主意。

在下面的示例中，我们使用

Time

和

TimeChanged

而不是

@bind-Time

，然后在处理程序方法

HandleTimeChange

中，我们不会将新值分配给

TimeValue

，因为这是父组件的责任，我们仅调用

TimeValueChanged

EventCallback

从而通知父级更改。

<MudTimePicker @ref=_picker Time=@TimeValue TimeChanged="HandleTimeChange" Label=@Label AutoClose="false">
    <PickerActions>
        <MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton>
        <MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">Ok</MudButton>
    </PickerActions>
</MudTimePicker>

@code {
    [Parameter]
    public TimeSpan? TimeValue { get; set; }
    [Parameter]
    public EventCallback<TimeSpan?> TimeValueChanged { get; set; }

    [Parameter]
    public string Label { get; set; }

    public MudTimePicker _picker;

    public void Dispose()
    {
        _picker.DisposeAsync();
    }
    private async void HandleTimeChange(TimeSpan? newTime){
        await TimeValueChanged.InvokeAsync(newTime);
    }
}

MudBlazor 片段