2

在 Visual Studio Enterprise 2019 Preview 3.0 中试用 Razor 组件模板项目。

从子组件的回调中更新 UI 绑定元素时，更改不会按预期反映在 UI 中。

父组件，将变量“状态”绑定到 UI：

@page "/parent"
@using System.Diagnostics
@using System.Threading.Tasks

Status: @Status

<Child OnUpdate="@Updated"></Child>

@functions {
    public string Status { get; set; }

    protected override async Task OnInitAsync()
    {
        Status = "Waiting...";
    }

    public void Updated()
    {
        Debug.WriteLine("Updated callback performed");
        Status = "Updated!";
    }
}

子组件，对父组件执行回调：

@using System
@using Microsoft.AspNetCore.Components

<button onclick="@OnUpdate">Do the update thing</button>

@functions {
    [Parameter] public Action OnUpdate { get; set; }
}

回调按预期执行，但 UI 没有更新！关于如何解决这个问题的任何建议？

4

3 回答 3

1

如果您将子组件 OnUpdate 参数类型从 Action 更改为 EventCallback，那么您的父组件应该会得到更新。

于 2019-03-14T23:26:41.777 回答
0

我总是阅读 Chris 在 Blazor 上的博客，其中包含大量信息... EventCallback 是组件编程模型的基本构建块。EventCallback 是一种值类型，它包装了一个委托并使用组件之间的委托解决问题。首先是组件：

<button onclick="@OnClick">Click here and see what happens!</button>

@functions
{
   [Parameter] EventCallback<UIMouseEventArgs> OnClick { get; set; }
}

二是组件用户：

@page "/callback"

<div>@text</div>
<div>@textAsync</div>

<MyButton OnClick="ShowMessage" />
<MyButton OnClick="ShowMessageAsync" />

@functions
{
   string text;

   void ShowMessage(UIMouseEventArgs e)
   {
        text = "Hello, world!";
   }
}

@functions {
    string textAsync;

    async Task ShowMessageAsync(UIMouseEventArgs e)     
    {
        await Task.Yield();
        textAsync = "Hello, world async!";
    }
}

编译器具有将委托转换为 EventCallback 的内置支持，并将执行一些其他操作以确保呈现过程有足够的信息来正确分派事件，EventCallback 始终使用对创建它的组件的引用来创建. 因此，EventCallback 始终是通过对创建它的组件的引用来创建的。从 MyButton 的角度来看 - 它获取 EventCallback<> 的值并将其传递给 onclick 事件处理程序。组件中的事件处理程序现在可以理解 EventCallback<> 以及委托。

于 2019-03-15T08:42:51.170 回答
0

您需要在子组件上添加一个事件，然后调用父事件。这应该有效。

@using System
@using Microsoft.AspNetCore.Components

<button onclick=@(() => OnClick())>Do the update thing</button>

@functions {
    [Parameter] public Action OnUpdate { get; set; }
    void OnClick()
    {
        OnUpdate?.Invoke();
    }
}
于 2019-04-19T14:28:15.713 回答