Blazor Server如何正确禁用预隐藏组件内部的按钮控件

• 执行时序问题：你先将show设为true，紧接着调用button.Disable()时，Blazor还没完成新组件的渲染流程，@ref还没有绑定到渲染树上的真实组件实例
• 错误的实例初始化：你父组件中手动ButtonComponent button = new();创建的实例，和后续Blazor渲染生成的组件实例完全无关，你一开始调用的是这个无效实例的方法，自然不会生效
• 额外补充：仅给按钮加disabled类只能修改样式，不会真正阻止按钮的点击、表单提交等交互行为，不符合功能要求

方案1：通过组件参数传递状态（最推荐，符合Blazor单向数据流规范） #

该方案不需要操作组件实例引用，所有状态由父组件管控，没有时序问题。

第一步：修改自定义ButtonComponent，定义接收禁用状态的参数 #

<div class="form-group">
    <!-- 直接绑定原生disabled属性，Blazor会自动处理布尔值到属性的映射 -->
    <button class="btn btn-primary" disabled="@IsDisabled">Disable Me</button>
</div>

@code {
    // 声明公开的组件参数
    [Parameter]
    public bool IsDisabled { get; set; }
}

第二步：修改父页面Index.razor，直接传递参数控制状态 #

@page "/"

<h1>How to disable button in component ?</h1>

<button class="btn btn-primary" @onclick="ShowAndDisableButton">Show and disable button</button>

@if (show)
{
    <!-- 直接传递禁用状态参数，不需要操作ref -->
    <ButtonComponent IsDisabled="@isButtonDisabled" />
}

@code
{
    bool show = false;
    bool isButtonDisabled = false;

    void ShowAndDisableButton()
    {
        show = true;
        isButtonDisabled = true;
    }
}

方案2：如果确实需要通过引用操作子组件方法 #

如果业务场景必须调用子组件的公开方法，需要删除手动初始化实例的代码，并且保证调用时组件已经完成渲染，你可以在修改状态后触发一次父组件重渲染，再调用子组件方法：

第一步：修改父页面代码 #

@page "/"

<h1>How to disable button in component ?</h1>

<button class="btn btn-primary" @onclick="ShowAndDisableButton">Show and disable button</button>

@if (show)
{
    <ButtonComponent @ref="button" />
}

@code
{
    // 不要手动new实例，@ref会自动赋值
    ButtonComponent button;
    bool show = false;

    async Task ShowAndDisableButton()
    {
        show = true;
        // 触发父组件重渲染，完成子组件的挂载和ref赋值
        await InvokeAsync(StateHasChanged);
        // 此时已经拿到真实的组件实例，可以正常调用方法
        button.Disable();
    }
}

第二步：修改子组件的Disable方法，调用重渲染保证状态更新同步到视图 #

<div class="form-group">
    <button class="btn btn-primary" disabled="@_isDisabled">Disable Me</button>
</div>

@code {
    private bool _isDisabled = false;

    public void Disable()
    {
        _isDisabled = true;
        // 主动触发子组件重渲染，更新视图
        StateHasChanged();
    }
}

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