Blazor中按钮点击后禁用需绑定disabled属性并闭环管理状态：定义bool字段isSubmitting，点击时设true，异步操作用try-finally确保await后重置为false，并可结合文字变化提示加载状态。
Blazor 中按钮点击后禁用，核心是通过绑定 disabled 属性并控制其布尔值状态，避免重复提交或误操作。关键在于及时更新状态、合理处理异步逻辑，并注意组件生命周期影响。
使用 @bind-disabled 绑定禁用状态
最直接的方式是将按钮的 disabled 属性绑定到一个布尔字段，点击时设为 true，操作完成后恢复为 false。
- 在
@code块中定义字段，如private bool isSubmitting = false; - 按钮写法：
<button @onclick="HandleClick" disabled="@isSubmitting">提交</button> - 点击方法中先设
isSubmitting = true;，再执行业务逻辑（尤其是 await 后需手动重置）
异步操作后自动恢复启用
若点击触发异步任务（如 HTTP 调用），必须在 await 完成后重置状态，否则按钮会一直禁用。
- 推荐用
try-finally确保无论成功失败都恢复：
<!-- 示例 -->
private async Task HandleClick()
{
isSubmitting = true;
try
{
await HttpClient.PostAsJsonAsync("/api/submit", model);
// 成功提示等逻辑
}
finally
{
isSubmitting = false;
}
} - 不建议只在
await后写isSubmitting = false;，异常时会被跳过
结合 Loading 状态提升体验
禁用按钮的同时，可配合文字或图标变化，让用户感知正在处理。
- 例如：
<button @onclick="HandleClick" disabled="@isSubmitting">@((isSubmitting) ? "提交中..." : "提交")</button> - 也可嵌入
<span></span>或<Spinner></Spinner>组件（需自行实现或引用 UI 库） - 注意：修改文本或 DOM 内容本身不会触发重新渲染，必须靠
StateHasChanged()—— 但 Blazor 会在事件处理结束后自动刷新，通常无需手动调用
防止组件销毁导致状态丢失
若按钮位于条件渲染块（如 @if (showForm)）或路由组件中，用户快速导航可能造成状态未重置。
- 确保
isSubmitting在组件重用或重建时有合理初始值（如false） - 避免在
OnInitializedAsync中重置该字段，除非你明确需要每次进入都清空 - 如需跨导航保持状态，考虑用服务（Scoped Service）托管提交状态，而非组件内字段
基本上就这些。禁用按钮不是难事，关键是状态管理要闭环——点下去就锁住，做完就放开，异常也不能漏掉。
