后端更改后 InputDate 字段未更新

Question

我正在尝试制作一个允许您选择开始和结束日期的组件。其中一部分当然是开始日期不能早于结束日期，反之亦然。为此，我创建了以下组件：

@if (!IsDisabled)
{
    <div class="form-row">
        <div class="col">
            <label for="@($"startDate-{_id}")">Start datum</label>
            <InputDate class="form-control" id="@($"startDate-{_id}")" TValue="DateTime" Value="@StartDate" ValueChanged="@((e) => HandleStartDateChanged(e))" ValueExpression="(() => StartDate)" />
        </div>
        <div class="col">
            <label for="@($"endDate-{_id}")">Eind datum</label>
            <InputDate class="form-control" id="@($"endDate-{_id}")" TValue="DateTime" Value="@EndDate" ValueChanged="@((e) => HandleEndDateChanged(e))" ValueExpression="(() => EndDate)" />
        </div>
    </div>
}
else
{
    <div class="form-row">
        <div class="col">
            <label for="@($"startDate-{_id}")">Start datum</label>
            <input type="date" class="form-control" id="@($"startDate-{_id}")" @bind-value="@StartDate" disabled />
        </div>
        <div class="col">
            <label for="@($"endDate-{_id}")">Eind datum</label>
            <input type="date" class="form-control" id="@($"endDate-{_id}")" @bind-value="@EndDate" disabled />
        </div>
    </div>
}

@code{
    private string _id = Guid.NewGuid().ToString();

    [Parameter] public bool IsDisabled { get; set; }

    [Parameter] public DateTime StartDate { get; set; }
    [Parameter] public EventCallback<DateTime> StartDateChanged { get; set; }

    [Parameter] public DateTime EndDate { get; set; }
    [Parameter] public EventCallback<DateTime> EndDateChanged { get; set; }

    private void HandleStartDateChanged(DateTime newStartDate)
    {
        if (DateTime.Compare(newStartDate, EndDate) < 0)
        {
            StartDate = newStartDate;
            StartDateChanged.InvokeAsync(StartDate);
        }
        else
        {
            StateHasChanged();
        }
    }
    private void HandleEndDateChanged(DateTime newEndDate)
    {
        if (DateTime.Compare(StartDate, newEndDate) < 0)
        {
            EndDate = newEndDate;
            EndDateChanged.InvokeAsync(EndDate);
        }
        else
        {
            StateHasChanged();
        }
    }
}

要使用它，您可以这样做：

<EditForm Model=@TempModel>
    <DateTimePeriodComponent @bind-StartDate="DEBUG_START" @bind-EndDate="DEBUG_END" IsDisabled="IsDisabled" />
</EditForm>

我遇到的问题是，虽然在后端一切正常，这意味着如果它在结束日期之后，则没有设置开始日期，但在 InputDate 中仍然显示错误的值。如果我在示例中切换 IsDisabled，则会显示正确的日期（例如前一个日期）。我怀疑这是由于 InputDate 不知何故没有更新，但我似乎无法弄清楚原因。据我所知，当您向绑定 Value=@StartDate 添加额外的 @ 时，它会启用双向绑定并且应该更改。

我是错过了什么愚蠢的事情还是我做错了？

Answer 1

在我看来，当出现错误时，您的控件应该使用可为空的日期和明确的值，可能是这样的：

    <div class="form-row">
        <div class="col">
            <label for="@($"startDate-{_id}")">Start datum</label>
            <InputDate class="form-control" id="@($"startDate-{_id}")" TValue="DateTime?" Value="@_StartDate" ValueChanged="@((e) => HandleStartDateChanged(e))" ValueExpression="(() => _StartDate)" />
        </div>
        <div class="col">
            <label for="@($"endDate-{_id}")">Eind datum</label>
            <InputDate class="form-control" id="@($"endDate-{_id}")" TValue="DateTime?" Value="@_EndDate" ValueChanged="@((e) => HandleEndDateChanged(e))" ValueExpression="(() => _EndDate)" />
        </div>
    </div>



@code{
    private string _id = Guid.NewGuid().ToString();

    [Parameter] public bool IsDisabled { get; set; }

    [Parameter] public DateTime StartDate { get; set; }
    [Parameter] public EventCallback<DateTime> StartDateChanged { get; set; }

    [Parameter] public DateTime EndDate { get; set; }
    [Parameter] public EventCallback<DateTime> EndDateChanged { get; set; }

    private DateTime? _StartDate { get; set; }
    private DateTime? _EndDate { get; set; }
    
    protected override void OnParametersSet()
    {
        _StartDate = StartDate;
        _EndDate = EndDate;
    }

    private void HandleStartDateChanged(DateTime? newStartDate)
    {
        if (newStartDate != null && newStartDate.Value != StartDate && newStartDate.Value < EndDate)
        {
            StartDate = newStartDate.Value;
            _StartDate = newStartDate;
            StartDateChanged.InvokeAsync(StartDate);
        }
        else
        {
            _EndDate = null;
            StateHasChanged();
        }
    }
    private void HandleEndDateChanged(DateTime? newEndDate)
    {
        if (newEndDate  != null && newEndDate.Value != EndDate &&  StartDate < newEndDate.Value )
        {
            EndDate = newEndDate.Value;
            _EndDate = newEndDate;
            EndDateChanged.InvokeAsync(EndDate);
        }
        else
        {
            _StartDate = null;
            StateHasChanged();
        }
    }
}

查看https://blazorfiddle.com/s/u0h87rmq

另外，因为这个组件在 EditForm 中，你应该通知 EditContext 的变化，检查 Option 1: Raising from EditContext