从子组件更新父组件答案

【问题标题】：Update parent component from child component从子组件更新父组件
【发布时间】：2023-02-20 21:59:30
【问题描述】：

我有一个包含 2 个子组件的父页面。 Child1 组件应该有两个按钮，当您单击一个按钮时，另一个按钮将被禁用，并且每个按钮都应该将一个字符串添加到模型caseDetails.Log 的列表中。然后该列表显示在 Child2 组件中。

起初我的问题是父页面没有显示添加到列表中的新行。我通过创建一个事件回调函数并从ClaimCase()和await UpdatePage.InvokeAsync();调用它，使其与 Child1 组件的 ClaimCase() 函数一起工作

然后两个按钮都可以使用，但列表仅在调用 ClaimCase() 时更新。

然后，我将 await UpdatePage.InvokeAsync(); 添加到 UnclaimCase()，但随后按钮上的 disabled 属性停止更新，因此当我单击 Unclaim 按钮时，Claim 按钮未启用。

为什么当我从UnclaimCase()而不是ClaimCase()调用事件回调时会发生这种情况？

家长：

<Child1 CaseClaimed="true" UpdatePage="UpdatePage"/>
<Child2 LogList="@caseDetails.Log"/>
    
@code {
private void UpdatePage(){}
}

孩子 1：

<button disabled=@CaseClaimed @onclick="ClaimCase">Claim</button>
<button disabled=@(!CaseClaimed) @onclick="UnclaimCase">Unclaim</button>

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

[Parameter]
public EventCallback UpdatePage { get; set; }

private async Task ClaimCase()
{
    CaseClaimed = true;

    caseDetails.Log.Insert(0, $"User claimed case");

    await UpdatePage.InvokeAsync();

}

private async Task UnclaimCase()
{
    CaseClaimed = false;

    caseDetails.Log.Insert(0, $"User unclaimed case");

    await UpdatePage.InvokeAsync();

}

孩子 2：

@if (LogList != null)
{
    foreach (var log in LogList)
    {
        <p>@log</p>
    }
}

@code {
    [Parameter]
    public List<string> LogList { get; set; }
}

【问题讨论】：

请在blazor repl中复制它。我敢打赌问题出在你在这里省略的细节上

标签： blazor blazor-webassembly

【解决方案1】：

当我在 ClaimCase 和 UnclaimCase 函数中的事件回调之后设置 CaseClaimed 的值时，问题就解决了。

像这样：

caseDetails.Log.Insert(0, $"User claimed case");

await UpdatePage.InvokeAsync();

CaseClaimed = true;

【讨论】：