[英]Blazor eventcallback only executes once when eventcallback is set
在 bazor wasm 中,我正在制作一個分頁器組件,以向表格組件添加分頁。 分頁器組件接受一個事件回調 ( PageChanged
),該回調在用戶更改頁面時執行。
這是視圖
<div id="paginator-container">
<div id="paginator-controls">
<button type="button"
class="btn btn-action"
@onclick="@this.GoToFirstPage"
disabled="@this.IsFirstPage">
<i class="fas fa-angle-double-left"></i>
</button>
<button type="button"
class="btn btn-action"
@onclick="@this.GoToPreviousPage"
disabled="@this.IsFirstPage">
<i class="fas fa-angle-left"></i>
</button>
<span>
page @this.CurrentPage of @this.PageCount
</span>
<button class="btn btn-action"
@onclick="@this.GoToNextPage"
disabled="@this.IsLastPage">
<i class="fas fa-angle-right"></i>
</button>
<button class="btn btn-action"
@onclick="@this.GoToLastPage"
disabled="@this.IsLastPage">
<i class="fas fa-angle-double-right"></i>
</button>
</div>
以及相關的代碼
public partial class Paginator
{
[Parameter]
public int Lenght { get; set; }
[Parameter]
public EventCallback<InnosysPaginatorContext> PageChanged { get; set; }
[Parameter]
public int PageSize { get; set; } = 50;
private int CurrentPage { get; set; }
private int PageCount { get; set; }
private bool IsFirstPage
=> this.CurrentPage == 1;
private bool IsLastPage
=> this.CurrentPage == this.PageCount;
protected override void OnParametersSet()
{
this.SetPageCount();
this.CurrentPage = 1;
base.OnParametersSet();
}
private void SetPageCount()
{
decimal pageCount = (decimal)this.Lenght / this.PageSize;
if (pageCount != Math.Floor(pageCount))
{
pageCount = Math.Floor(pageCount + 1);
}
this.PageCount = (int)pageCount;
}
private async Task GoToFirstPage()
=> await this.GoToPage(1);
private async Task GoToPreviousPage()
=> await this.GoToPage(this.CurrentPage - 1);
private async Task GoToNextPage()
=> await this.GoToPage(this.CurrentPage + 1);
private async Task GoToLastPage()
=> await this.GoToPage(this.PageCount);
private Task GoToPage(int pageIndex)
{
this.CurrentPage = Math.Clamp(pageIndex, 1, this.PageCount);
return this.ExecutePageChangedEvent();
}
private async Task ExecutePageChangedEvent()
=> await this.PageChanged.InvokeAsync(new InnosysPaginatorContext
{
CurrentPage = this.CurrentPage,
PageSize = this.PageSize
});
}
當我使用分頁器而不設置PageChanged
時,如下所示:
<Paginator Lenght="300" />
我可以很好地瀏覽頁面。
但是,如果我設置回調,就像這樣
<Paginator Lenght="300"
PageChanged="@this.OnPageChangedTest" />
<p>Page: @pageIndex</p>
<p>page size: @pageSize</p>
@code{
int pageIndex = 1;
int pageSize = 50;
void OnPageChangedTest(InnosysPaginatorContext innosysPaginatorContext)
{
pageIndex = innosysPaginatorContext.CurrentPage;
pageSize = innosysPaginatorContext.PageSize;
}
}
按鈕只能工作一次,我只能到第2頁。隨后點擊下一頁的按鈕執行回調,但是分頁器的CurrentPage
卡在第2頁。為什么會出現這種情況?
問題應該在這里:
this.CurrentPage = 1;
每當執行 OnParametersSet 時執行; 實際上,您不需要將 CurrentPage 設置為 1。如果您只需要執行一次,您應該在 OnInitialized(Async) 對中執行
protected override void OnParametersSet()
{
this.SetPageCount();
// this.CurrentPage = 1;
base.OnParametersSet();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.