Question

在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未更新！有关如何解决此问题的任何建议？

Answer 1

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

Answer 2

我一直都在阅读Chris在Blazor上的博客，这是很好的信息... EventCallback是Components编程模型的基本构建块。 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 <>以及委托。

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

剃刀组件，子组件回调中的值更改未反映在UI中

3 个答案: