如何使用MudBrazor DatePicker EventCallback

Question

我正在尝试在我的web应用程序中使用MudBrazor DatePicker。

当我以文档中描述的方式将其与@bind-Date一起使用时

注意：总是使用双向绑定@bind Date绑定到DateTime类型的字段？

像这样。。。

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

它按我的预期工作。

除此之外，当InternalDate发生更改时，我无法调用任何内容。。。我设置表单字段的方式是，我实际上需要调用我自己的EventCallBack<日期时间>，然后封装组件将使用它来通过反射设置属性值，并触发诸如验证模型之类的事情。

对于所有其他MudBrazor入口字段组件，我可以简单地传递一些Value和ValueChanged属性，一切都正常，但如果我用DatePicker这样做。。。

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

我的行为很奇怪。然后，它只在使用日历拾取时工作。直接在文本中编辑日期会导致调用InternalDateChanged两次。一次使用正确的值，一次使用以前的旧值。

如果我尝试从setter调用，则行为是相同的。二传手被叫了两次。

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

如果我删除DateFormat和Mask，它将停止执行第二个不需要的调用。。。但这并不是一个真正的解决方案。。。

我还有什么可以做的吗？让这个组件工作，并且在InternalDate更改时仍然得到某种通知？

Answer 1

作为识别问题的起点，这里有几个MudDatePicker的实现，它们具有不同的设置值和驱动事件的方式，我曾试图生成一个"；最小可再现示例"；你的问题。

他们都按照我的期望工作。我缺少什么？你能用这个代码重现你的问题吗？

@page "/"
@using System.Globalization
<PageTitle>Index</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Date Test</MudText>
<div class="m-2">
<MudDatePicker Editable="true"
@bind-Date="@date1"
Clearable=true
DateFormat="@CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern"
Mask="@(new DateMask(CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern))" />
<MudDatePicker Editable="true"
Date=@date2
DateChanged=@OnDateChanged
Clearable=true
DateFormat="@CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern"
Mask="@(new DateMask(CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern))" />
<MudDatePicker Editable="true"
@bind-Date="@date3"
Clearable=true
DateFormat="@CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern"
Mask="@(new DateMask(CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern))" />
</div>
<MudAlert Severity="Severity.Normal" class="mt-4">
Date1 :@date1
</MudAlert>
<MudAlert Severity="Severity.Info" class="mt-4">
Date2: @date2
</MudAlert>
<MudAlert Severity="Severity.Warning" class="mt-4">
Date3: @date3
</MudAlert>
<MudAlert Severity="Severity.Success" class="mt-4">
@message
</MudAlert>
@code {
DateTime? date1 = DateTime.Today;
DateTime? date2 = DateTime.Today;
DateTime? _date3 = DateTime.Today;
DateTime? date3 {
get => _date3;
set {
if (!_date3.Equals(value))
{
_date3 = value;
ValueChanged?.Invoke(value);
}
}
}
private Action<DateTime?>? ValueChanged;
private string message = $"Not Set";
public Index()
=> ValueChanged = this.SetValue;
private Task OnDateChanged(DateTime? value)
{
date2 = value;
message = $"Current date set to {date2?.ToString("dd-MMM-yyyy")}";
// Do something Async
return Task.Delay(10);
}
private void SetValue(DateTime? value)
=> message = $"Current date set to {value?.ToString("dd-MMM-yyyy")}";
}