我可以通過 Blazor 組件更新 DateTime

Question

我創建了一個可重復使用的自定義 Blazor 組件來提供日+月選擇器（無年份）。

我傳入一個 DateTime 變量並通過組件更新它 - 好吧，我做了一個 new DateTime() 因為 DateTime 是不可變的。 原始變量沒有得到更新 - 這是因為我做了一個新的 DateTime() 嗎？

零件

    <div class="form-field">
    <label class="col-form-label">@SelectName</label>
    <div class="row">
        <div class="col">
            <InputSelect ValueExpression="@(()=>selectedDay)"
                         Value="@selectedDay"
                         ValueChanged="@((int value) => OnDayValueChanged(value))" class="form-control">
                @for (int day = 1; day <= numberOfDaysInSelectedMonth; day++)
                {
                    <option value="@day" selected="@(selectedDay==day?true:false)">@day</option>
                }
            </InputSelect>
        </div>
        <div class="col">
            <InputSelect ValueExpression="@(()=>selectedMonth)"
                         Value="@selectedMonth"
                         ValueChanged="@((int value) => OnMonthValueChanged(value))" class="form-control">
                @for (int month = 1; month <= 12; month++)
                {
                    <option value="@month" selected="@(selectedMonth==month?true:false)">@Months[month-1]</option>
                }
            </InputSelect>
        </div>
    </div>
</div>

@code {
    [Parameter] public DateTime SelectedDate { get; set; }
    [Parameter] public string SelectName { get; set; }
    private int selectedDay { get; set; }
    private int selectedMonth { get; set; }
    private int numberOfDaysInSelectedMonth { get; set; } = 0;
    private const int year = 2001; //Not a leap year
    private string[] Months = { "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August","September","Oktober","November","December"};
    [Parameter] public EventCallback<DateTime> OnDateSet { get; set; }

    protected override void OnInitialized()
    {
        selectedDay = SelectedDate.Day;
        selectedMonth = SelectedDate.Month;
        SetNumberOfDaysInMonth();
    }

    private void SetNumberOfDaysInMonth()
    {
        numberOfDaysInSelectedMonth = DateTime.DaysInMonth(year, selectedMonth);
    }
    private async Task OnDayValueChanged(int value)
    {
        selectedDay = value;
        await SetDate();
    }

    private async Task OnMonthValueChanged(int value)
    {
        selectedMonth = value;
        SetNumberOfDaysInMonth();

        if(selectedDay > numberOfDaysInSelectedMonth)
        {
            selectedDay = numberOfDaysInSelectedMonth;
        }
        await SetDate();
    }

    private async Task SetDate()
    {
        SelectedDate = new DateTime(
          year,
          selectedMonth,
          selectedDay,
          0, 0, 0
          );
        //My fix
        await OnDateSet.InvokeAsync(SelectedDate);
    }
}

使用組件時，我這樣做：

<DayMonthSelect SelectedDate="@serviceDescription.PlanValidFrom" SelectName="Gyldigt fra"></DayMonthSelect>

我已經使用帶有新 DateTime 的 EventCallBack 創建了一個解決方法，但我寧願不使用此修復程序，因為它還需要接收 function 用於組件的每次使用。

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

並添加調用回調方法

<DayMonthSelect SelectedDate="@serviceDescription.PlanValidFrom" SelectName="Gyldigt fra" OnDateSet="SetValidFromDate"></DayMonthSelect>

當組件中的輸入變量確實得到更新時，我創建了其他共享組件。 只是沒有這個！

Answer 1

“但我寧願不使用此修復程序……”這不是修復程序。 這就是這樣做的方法； 通過事件回調將新值傳遞給調用代碼（父組件）......但是，您可能會將所有相關代碼放在一個組件中； 即父組件，不需要使用子組件（不推薦，我剛剛指出了這種可能性）。