Blazor 绑定到属性似乎不会从组件触发

Question

我正在使用 mudblazor 的扩展面板开发 blazor web assembly 应用程序。简而言之，当它们绑定到对象的属性（从内部组件更改）时，我目前无法正确触发它们展开。我在下面对其进行了过度简化（或查看 trymudblazor (https://try.mudblazor.com/snippet/wuwyafQXojksUHSf)）。

我正在使用以下模型（ExpandModel）：

public class ExpandModel
{
    private bool _expanded;
    public bool Expanded
    {
        get => _expanded;
        set
        {
            var isChanged = _expanded != value;
            _expanded = value;
            if (isChanged)
                ExpandedChanged.InvokeAsync();
        }
    }

    public EventCallback<bool> ExpandedChanged;
}

这是组件（ExpandComponent）：

<MudButton OnClick="ToggleInner">Toggle inner</MudButton>

@code {
    [Parameter]
    public ExpandModel Model { get; set; }

    private void ToggleInner()
    {
        Model.Expanded = !Model.Expanded;
    }
}

这是主页：

@page "/"

<PageTitle>Home</PageTitle>

<MudButton @onclick="ToggleOuter">Toggle Outer</MudButton>
<MudExpansionPanels>
    <MudExpansionPanel @bind-IsExpanded="Model.Expanded">
        <TitleContent>
            <ExpandComponent Model="@Model"></ExpandComponent>
        </TitleContent>
    </MudExpansionPanel>
</MudExpansionPanels>

@code{
    private ExpandModel Model = new ExpandModel();

    private void ToggleOuter()
    {
        Model.Expanded = !Model.Expanded;
    }
}

当我使用“ToggleIOouter”时，它的工作方式完全符合我的预期。 “ToggleInner”会更改对象值，但不会更改 UI，即使调用 ExpandedChanged 也是如此。如果我以某种方式在主页中调用

StateHasChanged()

，我就能使其工作。但这似乎不是预期的方式。我对 blazor 相当陌生，所以我确信我错过了一些基本的东西。任何建议将不胜感激，如果这是愚蠢的明显，我表示最诚挚的歉意，但这让我发疯。预先感谢！

Answer 1

您不能按照我们尝试的方式使用

EventCallback

。 它需要位于 Component 类代码中。

这是代码的简化版本：

展开组件

<MudButton OnClick="ToggleInner">Toggle inner</MudButton>

@code {
    [Parameter] public ExpandModel Model { get; set; } = new();
    [Parameter] public EventCallback<ExpandModel> ModelChanged { get; set; }

    private void ToggleInner()
    {
        Model.Expanded = !Model.Expanded;
        this.ModelChanged.InvokeAsync(Model);
    }
}

public class ExpandModel
{
    public bool Expanded { get; set; }
}

和索引

@page "/"

<PageTitle>Home</PageTitle>

<MudButton @onclick="ToggleOuter">Toggle Outer</MudButton>
<MudExpansionPanels>
    <MudExpansionPanel @bind-IsExpanded="Model.Expanded">
        <TitleContent>
            <ExpandComponent @bind-Model="@Model"></ExpandComponent>
        </TitleContent>
        <ChildContent>
            <h1>Expanded Content</h1>
        </ChildContent>
    </MudExpansionPanel>
</MudExpansionPanels>

@code {
    private ExpandModel Model = new ExpandModel();

    private void ToggleOuter()
    {
        Model.Expanded = !Model.Expanded;
    }
}

这是有效的，因为绑定

EventCallback

被

Index

视为 UI 事件。 它由

ComponenbtBase's

IHandleEvent

实现处理，该实现会为您调用

StateHasChanged

。

您对

StateHasChanged

的看法是正确的。 只有一些非常特殊的情况需要您手动调用它。 一般来说，如果你调用它来使你的组件更新，你的逻辑就有缺陷。