Blazor WASM 如何将Razor @ref、@bind值传递给JavaScript完成Localbase写入？

你之前两次尝试失效，本质和@ref、autofocus没有关系，是踩了跨Blazor-JS边界传值的三个常见坑：

• 绑定值同步时机错位：默认@bind的同步触发点是输入框失焦（onchange），如果点提交按钮时输入框刚失焦，Blazor还没把最新输入回写到C#侧字段，传给JS的就是旧默认值
• JS侧无差别类型强转踩坑：不管传进来的是空字符串还是正常值，直接用+变量的方式转数字，碰到空字符串会转成0，根本和实际输入值对不上
• 模块初始化时机不对：JS侧的db实例没有提前初始化好，调用db.collection的时候直接报未定义错误，看起来就像值没传进去

第一步：修正@bind绑定逻辑，保证传给JS的是实时最新输入值 #

完全不需要用@ref去拿DOM元素的value再传JS——@bind本身已经做了DOM到C#字段的双向绑定，只要把同步触发时机调整为输入即更新，拿到的就是实时值：

<!-- 输入框绑定，触发时机设为oninput，输入动作发生时就同步更新C#侧字段 -->
<input type="number" @bind="InNumberPatient" @bind:event="oninput" />
<input type="text" @bind="InInterval" @bind:event="oninput" />
<input type="text" @bind="InMHCProduct" @bind:event="oninput" />
<input type="text" @bind="InComProduct" @bind:event="oninput" />

<button @onclick="AddDB">提交写入</button>

第二步：修正JS侧接收逻辑，避免类型转换和初始化错误 #

把之前无差别的+变量强转改成有容错的数字转换，同时把db实例的初始化和写入逻辑解耦，避免未定义报错：

// 模块顶层声明db实例，通过独立的初始化方法接收Blazor侧传入的db对象
let db;
export function initLocalbase(dbInstance) {
  db = dbInstance;
}

export function localbase(InNumberPatient, InInterval, InMHCProduct, InComProduct) {
  // 每个参数单独做容错转换，空值转成0，避免无差别强转的逻辑bug
  const payload = {
    InNumberPatient: Number(InNumberPatient) || 0,
    InInterval: Number(InInterval) || 0,
    InMHCProduct: Number(InMHCProduct) || 0,
    InComProduct: Number(InComProduct) || 0
  };

  // 写入和查询逻辑补全错误捕获，方便定位问题
  db.collection('calculate').add(payload)
    .then(() => db.collection('calculate').get())
    .then(calculateList => console.log('写入完成，集合内数据：', calculateList))
    .catch(err => console.error('Localbase写入失败：', err));
}

第三步：优化C#侧的JS调用逻辑，避免重复加载模块 #

把JS模块的加载动作从点击提交的方法里挪到组件生命周期初始化阶段，减少不必要的重复import请求，同时尽量把需要传的字段定义为数值类型，减少跨边界的类型转换成本：

@code{
    // 数值类型的字段直接定义为对应的数值类型，减少和JS交互的转换错误
    private int InNumberPatient;
    private decimal InInterval;
    private decimal InMHCProduct;
    private decimal InComProduct;
    private IJSObjectReference? localbaseJsModule;

    protected override async Task OnInitializedAsync()
    {
        // 组件初始化完成后就加载JS模块，不要等点击按钮才加载
        localbaseJsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/Localbase.js");
        // 如果需要把初始化好的Localbase db实例传给JS模块，在这里调用初始化方法即可
        // await localbaseJsModule.InvokeVoidAsync("initLocalbase", 已在JS侧初始化好的db实例);
    }

    private async Task AddDB()
    {
        if (localbaseJsModule == null) return;
        // 直接把C#侧同步好的@bind字段值传给JS方法即可，全程不需要操作DOM和@ref
        await localbaseJsModule.InvokeVoidAsync(
            "localbase", 
            InNumberPatient, 
            InInterval, 
            InMHCProduct, 
            InComProduct
        );
        Console.WriteLine("写入请求已发送");
    } 
}

常见误区澄清：

• @ref的适用场景是需要直接操作DOM元素（比如强制输入框聚焦、读取原生DOM的特殊属性），传输入值的场景下用它反而会因为DOM和Blazor状态的同步时机问题出bug，完全没必要
• autofocus只是控制页面加载完成后的默认焦点位置，和传值链路没有任何关系，靠它解决不了值不同步的问题
• 如果JS方法执行时控制台报db is not defined的错误，说明你跳过了db实例的初始化步骤，不是传值失败

内容的提问来源于stack exchange，提问作者Hani