根据 Blazor 中 child 组件内的事件显示组件

Question

我正在尝试根据点击事件呈现 child 组件。

在基本层面上，我正在尝试这个

Parent:

@if (!TheBoolean)
{
    <Child1 OnClickCallback="ClickHandler" />
}

@if (TheBoolean)
{
    <Child2 OnClickCallback="ClickHandler" />
}

@code {
    private bool TheBoolean { get; set; }

    private void ClickHandler(bool theBoolean)
    {
        TheBoolean = theBoolean;
    }
}

Child1和2的代码，逻辑差不多，一个为真，一个为假。

<button type="button" @onclick="@(() => OnClickCallback.InvokeAsync(false))">Finish</button>

@code {
    [Parameter]
    public EventCallback<bool> OnClickCallback { get; set; }
}

我确定我遗漏了什么或做错了什么（或者两者都有）。我试图让 parent 组件根据 child 组件的回调值呈现某个 child 组件。希望这很清楚。谢谢

Answer 1

TheBoolean 属性 您的更新丢失了。

@if (!TheBoolean)
{
    <Child1 OnClickCallback="ClickHandler" />
}

@if (TheBoolean)
{
    <Child2 OnClickCallback="ClickHandler" />
}

@code {
    private bool TheBoolean { get; set; }
     
    private void ClickHandler(bool theBoolean)
    {
        TheBoolean = theBoolean;
    }
}

这是一个有效的 Fiddle

因为这个例子是布尔值，所以这样会更好：

@if (TheBoolean)
{
    <Child2 OnClickCallback="ClickHandler" />
}
else
{
    <Child1 OnClickCallback="ClickHandler" />
}