剃须刀组件，子零件回调的价值变化未反映在UI中

Question

在Visual Studio Enterprise 2019 Preview 3.0中尝试剃须刀组件模板项目。

在从子组件中更新来自儿童组件回调的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未更新！关于如何解决此问题的任何建议？

Answer 1

如果您将孩子组件Onupdate参数类型从操作更改为EventCallback，则您的父组件应更新。

Answer 2

我总是阅读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始终以引用创建它的组件创建。从Mybutton的角度来看，它具有EventCallback＆lt;>的价值，并将其传递给OnClick Event Handler。现在，组件中的活动处理程序了解EventCallback＆lt;>以及代表。

Answer 3

您需要在子组件上添加事件，然后调用父事件。这应该起作用。

@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();
    }
}