代码之家 › 专栏 › 技术社区 › Kiiiieeeeuuuw

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

mudblazor blazor-webassembly blazor binding

Kiiiieeeeuuuw · 技术社区 · 2 年前

我正在使用mudblazor的扩展面板开发一个blazor网络组装应用程序。简而言之,当它们绑定到对象的属性时,我目前无法正确地触发它们进行扩展,该属性是从内部组件更改的。我在下面过于简单化了(或者查看试用版)( 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;
    }
}

当我使用“ToggleIOuter”时,它的工作方式正是我所期望的。“Toggle Inner”会更改对象值,但不会更改UI,即使调用了ExpandedChanged。如果我打电话给 StateHasChanged() 在主页中。但这似乎不是预期的方式。我是blazor的新手,所以我肯定我错过了一些基本的东西。如果这是愚蠢的显而易见的,我们将非常感谢任何建议,并致以最诚挚的歉意,但这让我发疯了。提前感谢!

1 回复 | 直到 2 年前

MrC aka Shaun Curtis 2 年前

你不能使用 EventCallback 我们正在尝试。它需要在组件类代码中。

以下是您代码的简化版本:

展开组件

<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;
    }
}

这是因为绑定 事件回调 被视为UI事件 Index 。由处理 ComponenbtBase's IHandleEvent 调用的实现 StateHasChanged 为你。

你对 状态已更改 。只有在一些非常特殊的情况下,您需要手动调用它。一般来说,如果您调用它来更新组件,那么您的逻辑是有缺陷的。