Компоненты бритвы, изменение значения в обратном вызове дочернего компонента не отражается в пользовательском интерфейсе

Question

Опробовать проект шаблона компонентов Razor в Visual Studio Enterprise 2019 Preview 3.0.

При обновлении элемента, связанного с пользовательским интерфейсом, в обратном вызове от дочернего компонента, изменение не отражается в пользовательском интерфейсе, как ожидалось.

Родительский компонент, привязка переменной "Status" к пользовательскому интерфейсу:

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

Обратный вызов выполняется, как и ожидалось, но пользовательский интерфейс не обновляется! Любые предложения о том, как решить эту проблему?

Answer 1

Если вы измените тип параметра дочерних компонентов OnUpdate с Action на EventCallback, ваш родительский компонент должен быть обновлен.

Answer 2

Я всегда читаю блог Криса о 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();
    }
}