feat: 增加数据双向绑定支持

Author: ArgoZhang

src/BootstrapBlazor/Components/Input/OtpInput.razor

@@ -2,7 +2,6 @@
 @inherits ValidateBase<string>
 
 <div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
-    <input hidden value="@CurrentValueAsString" class="bb-opt-input-val" />
     @for (var index = 0; index < Digits; index++)
     {
             @if(IsReadonly || IsDisabled)

src/BootstrapBlazor/Components/Input/OtpInput.razor.cs

@@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// OTP input component
 /// </summary>
-[BootstrapModuleAutoLoader("Input/OtpInput.razor.js")]
+[BootstrapModuleAutoLoader("Input/OtpInput.razor.js", JSObjectReference = true)]
 public partial class OtpInput
 {
     /// <summary>
@@ -87,8 +87,27 @@ protected override void OnParametersSet()
         }
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(TriggerSetValue));
+
     private char? GetValueString(int index)
     {
         return _values[index] != 0 ? _values[index] : null;
     }
+
+
+    /// <summary>
+    /// Trigger value changed event callback. Trigger by JavaScript.
+    /// </summary>
+    /// <param name="val"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public Task TriggerSetValue(string val)
+    {
+        CurrentValueAsString = val;
+        return Task.CompletedTask;
+    }
 }

src/BootstrapBlazor/Components/Input/OtpInput.razor.js

@@ -1,6 +1,6 @@
 import EventHandler from '../../modules/event-handler.js'
 
-export function init(id) {
+export function init(id, invoke, method) {
     const el = document.getElementById(id);
     const skipKeys = ['Enter', 'Tab', 'Shift', 'Control', 'Alt'];
     EventHandler.on(el, 'input', '.bb-opt-item', e => {
@@ -10,7 +10,7 @@ export function init(id) {
                 e.target.value = e.target.value.slice(1, 2);
             }
         }
-        setValue(el);
+        setValue(el, invoke, method);
     });
     EventHandler.on(el, 'keydown', '.bb-opt-item', e => {
         if (e.ctrlKey) {
@@ -63,13 +63,14 @@ export function init(id) {
             }
         }
         e.target.blur();
-        setValue(el);
+        setValue(el, invoke, method);
     });
 }
 
-const setValue = el => {
-    const input = el.querySelector('.bb-opt-input-val');
-    input.value = [...el.querySelectorAll('.bb-opt-item')].map(input => input.value).join('');
+const setValue = (el, invoke, method) => {
+    const val = [...el.querySelectorAll('.bb-opt-item')].map(input => input.value).join('');
+    console.log(val);
+    invoke.invokeMethodAsync(method, val);
 }
 
 const setPrevFocus = (el, target) => {