feat(Checkbox): optimize OnBeforeStateChanged callback method (#4566)

* refactor: 增加 data-bb-trigger-before 标签支持参数动态赋值

* refactor: 判断标签值进行 invoke 提高效率

* chore: bump version 8.11.1-beta02

* refactor: 更新关键字

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.11.1-beta01</Version>
+    <Version>8.11.1-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Checkbox/Checkbox.razor

@@ -20,7 +20,7 @@ else
 @code {
     RenderFragment RenderCheckbox =>
     @<div @attributes="AdditionalAttributes" class="@ClassString">
-        <DynamicElement TagName="input" class="@InputClassString" type="checkbox" id="@Id" disabled="@Disabled" checked="@CheckedString" TriggerClick="TriggerClick" OnClick="OnToggleClick" StopPropagation="StopPropagation" />
+        <DynamicElement TagName="input" class="@InputClassString" type="checkbox" id="@Id" disabled="@Disabled" checked="@CheckedString" data-bb-trigger-before="@TriggerBeforeValueString" TriggerClick="TriggerClick" OnClick="OnToggleClick" StopPropagation="StopPropagation" />
         @if (IsShowAfterLabel)
         {
             @RenderLabel

src/BootstrapBlazor/Components/Checkbox/Checkbox.razor.cs

@@ -100,6 +100,8 @@ public partial class Checkbox<TValue> : ValidateBase<TValue>
     [Parameter]
     public bool StopPropagation { get; set; }
 
+    private string? TriggerBeforeValueString => OnBeforeStateChanged == null ? null : "true";
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -155,13 +157,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override async Task InvokeInitAsync()
-    {
-        if (OnBeforeStateChanged != null)
-        {
-            await InvokeVoidAsync("init", Id, Interop, new { Callback = nameof(TriggerOnBeforeStateChanged) });
-        }
-    }
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { Callback = nameof(TriggerOnBeforeStateChanged) });
 
     /// <summary>
     /// 触发 OnBeforeStateChanged 回调方法 由 JavaScript 调用

src/BootstrapBlazor/Components/Checkbox/Checkbox.razor.js

@@ -9,8 +9,12 @@ export function init(id, invoke, options) {
 
     EventHandler.on(el, 'click', async e => {
         e.preventDefault();
-        await invoke.invokeMethodAsync(options.callback);
-    })
+
+        const trigger = el.getAttribute("data-bb-trigger-before");
+        if (trigger === 'true') {
+            await invoke.invokeMethodAsync(options.callback);
+        }
+    });
 }
 
 export function dispose(id) {