基于 Blazor 中子组件内的事件显示组件

Question

我正在尝试基于点击事件呈现子组件。

基本上我正在尝试这个

家长：

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

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

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

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

Child 1 和 2 的代码，逻辑几乎相同，一个为 true，另一个为 false。

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

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

我确定要么我遗漏了什么，要么做错了什么（或者两者兼而有之）。我试图让父组件根据子组件的回调值来渲染某个子组件。希望这很清楚。谢谢。

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" />
}