DevExpress Blazor DxPopup组件关闭后无法再次打开问题咨询

弹窗首次打开关闭后无法二次触发的核心原因是Blazor组件跨层级状态不同步：

• 你将子组件（Warning组件）的WarningPopupVisible标记为[Parameter]，按照Blazor的组件通信规则，组件参数仅能由父组件修改，子组件不能直接给参数赋值
• 首次点击父页面打开按钮时，父组件将自身的WarningPopupVisible设为true，传递给子组件后弹窗正常打开
• 点击子组件内的关闭按钮时，你直接在子组件内部将WarningPopupVisible参数赋值为false，这个修改仅作用在子组件内部，没有同步通知父组件，此时父组件持有的WarningPopupVisible值仍然是true
• 后续再次点击父页面打开按钮时，执行WarningPopupVisible = true属于给变量赋和当前值完全相同的内容，Blazor变更检测不会触发组件重渲染，子组件收不到参数更新，弹窗自然无法打开。

1. 修改子组件（Warning组件）代码 #

补充参数对应的EventCallback用于向父组件回传状态变更，不要直接在子组件内修改Parameter属性：

<DxPopup 
    Visible="@WarningPopupVisible"
    VisibleChanged="OnPopupVisibleChanged"
    ShowFooter="true"
    HeaderText="Warning"
    BodyText="Content content content content"
>
    <FooterContentTemplate>
        <DxButton 
            CssClass="popup-button" 
            RenderStyle="ButtonRenderStyle.Primary" 
            Text="Tamam" 
            Click="@(() => OnPopupVisibleChanged(false))"
        />
    </FooterContentTemplate>
</DxPopup>

@code {
    [Parameter]
    public bool WarningPopupVisible { get; set; } 

    [Parameter]
    public EventCallback<bool> WarningPopupVisibleChanged { get; set; }

    private async Task OnPopupVisibleChanged(bool visible)
    {
        // 所有状态变更都通过回调通知父组件修改，不直接改参数
        await WarningPopupVisibleChanged.InvokeAsync(visible);
    }
}

2. 修改父页面（/productspage）代码 #

使用Blazor原生双向绑定语法绑定子组件参数，保证父子组件状态完全同步：

<Warning @bind-WarningPopupVisible="WarningPopupVisible"/>

<DxButton Text="Open Modal" CssClass="w-25" Click="@(() => WarningPopupVisible = true)" />

@code {
    public bool WarningPopupVisible { get; set; }
}

修复后所有弹窗显隐的状态都由父页面统一管理，子组件仅通过回调通知状态变更，不会再出现状态断层导致的弹窗无法打开问题。

内容的提问来源于stack exchange，提问作者mehmet Mutlu Elmas