Razor页面嵌入的Razor组件内HTML提交按钮如何点击后禁用防重复提交

以下两种实现方案都可以解决重复提交问题，优先推荐使用Razor组件原生的状态绑定方案，无需手动获取DOM操作句柄，符合Blazor开发规范。

方案1：组件状态绑定实现（推荐） #

通过组件内部状态直接控制按钮禁用状态，逻辑更简洁易维护：

第一步：修改CustomerPreviewRequest组件代码 #

1. 组件@code块新增状态变量、提交回调参数和处理逻辑：

@code {
    // 控制提交按钮禁用状态
    private bool _isSubmitting = false;

    // 提交事件回调，用于触发父页面的保存逻辑
    [Parameter]
    public EventCallback OnSubmit { get; set; }

    private async Task HandleFormSubmit()
    {
        // 拦截重复点击
        if (_isSubmitting) return;

        _isSubmitting = true;
        try
        {
            // 调用父页面的数据库保存逻辑
            await OnSubmit.InvokeAsync();
        }
        finally
        {
            // 若提交失败后需要允许用户重新提交，可取消注释下方代码；提交成功后跳转页面的场景无需设置
            // _isSubmitting = false;
        }
    }

    // 保留你原有组件的其他逻辑
}

2. 修改组件内的按钮代码，绑定禁用状态和点击事件：

<button aria-label="Submit Request." type="submit" class="login100-form-btn" style="background-color:#1a2b57"
        tabindex="0" id="submitForm" disabled="@_isSubmitting" @onclick="HandleFormSubmit">
    Submit Request
</button>

第二步：修改父页面CreateForm的组件引用 #

给嵌入的CustomerPreviewRequest组件新增OnSubmit参数，绑定你原有数据入库的方法即可：

<CustomerPreviewRequest HeadingToShow="@HeadingToShowPreviewCustomerScreen"
                        onBack="MoveToPreviousPage"
                        CurrentCustomerSubmission="@_model"
                        OnSubmit="SaveCustomerToDatabase">
</CustomerPreviewRequest>

上面代码中的SaveCustomerToDatabase就是你原本实现数据保存到数据库的业务方法。

方案2：DOM句柄操作实现（不推荐） #

如果你确实需要直接获取按钮的操作句柄，可以通过ElementReference结合JS互操作实现：

1. 在CustomerPreviewRequest组件的@code块添加如下代码：

@code {
    // 按钮DOM引用
    private ElementReference _submitBtn;
    // 注入JS运行时
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private async Task HandleFormSubmit()
    {
        // 点击后直接禁用按钮
        await JSRuntime.InvokeVoidAsync("eval", "arguments[0].disabled = true", _submitBtn);
        
        // 后续提交逻辑...
    }
}

2. 给按钮添加@ref绑定关联引用：

<button @ref="_submitBtn" aria-label="Submit Request." type="submit" class="login100-form-btn" style="background-color:#1a2b57"
        tabindex="0" id="submitForm">
    Submit Request
</button>

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