اندازهی قلم متن
تخمین مدت زمان مطالعهی مطلب:
یک دقیقه
اینطور که در این مطلب عنوان شده، ماوسهای قدیمی در اثر مشکلات سخت افزاری، میتوانند بهازای هر کلیک کاربر، دو سیگنال کلیک، ظرف مدت کوتاهی (برای مثال 5 میلی ثانیه) تولید کنند. برنامههای مبتنی بر Blazor، توسط متدهای نامتقارن میتوانند هردوی این سیگنالها را دریافت کرده و بنابراین متد مربوطه در کسری از ثانیه دوبار اجرا خواهد شد.
برای رهایی از این مشکل میتوان از کدی شبیه زیر بهره جست:
<button disabled="@_busy" Value="do-stuff" /> code{ private bool _busy = false; public async Task Handler() { if(_busy) return; _busy = true; try { // do your thing } finally { _busy = false; } } }
منطق آن ساده است؛ تا زمانی که اجرای متد، پایان نپذیرفتهاست، دکمهی مربوطه غیرفعال میگردد، تا نتوان دوباره روی آن کلیک کرد.
اگر نمیخواهید به ازای هر کامپوننت، این کدهای تکراری را ایجاد کنید، میتوانید کدهای فوق را در قالب یک کامپوننت مانند زیر ایجاد کنید (با نام دلخواه HandleValidSubmitForm.razor):
<EditForm Model="Model" OnValidSubmit="HandleValidSubmit"> @ChildContent?.Invoke(context) <button disabled="@_busy">Submit</button> </EditForm> @code { private bool _busy; [Parameter] public object? Model { get; set; } [Parameter] public EventCallback<EditContext> OnValidSubmit { get; set; } [Parameter] public RenderFragment<EditContext>? ChildContent { get; set; } private async Task HandleValidSubmit(EditContext editContext) { if (_busy) return; _busy = true; try { await OnValidSubmit.InvokeAsync(editContext); } finally { _busy = false; } } }
سپس میتوانید در دیگر کامپوننتها به شکل زیر از آن بهره ببرید.
<HandleValidSubmitForm Model="_customer" OnValidSubmit="HandleValidSubmit"> <InputText @bind-Value="_customer.FirstName" /> <InputText @bind-Value="_customer.LastName" /> </HandleValidSubmitForm> @code { private Customer _customer = new Customer(); private async Task HandleValidSubmit() { // do your thing } public class Customer { public string? FirstName { get; set; } public string? LastName { get; set; } } }