2
votes

Composants Razor, changement de valeur dans le rappel de composant enfant non reflété dans l'interface utilisateur

Tester le projet de modèle Razor Components dans Visual Studio Enterprise 2019 Preview 3.0.

Lors de la mise à jour d'un élément lié à l'interface utilisateur dans un rappel à partir d'un composant enfant, la modification n'est pas reflétée dans l'interface utilisateur comme prévu.

Composant parent, liant la variable "Status" à l'interface utilisateur:

@using System
@using Microsoft.AspNetCore.Components

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

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

Composant enfant, effectuant un rappel au parent:

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

Le rappel est effectué comme prévu, mais l'interface utilisateur n'est pas mise à jour! Des suggestions pour résoudre ce problème?

blazor-server-side

0 commentaires

3 Réponses :

1
votes

Si vous modifiez votre type de paramètre Composants enfants OnUpdate d'Action en EventCallback, votre composant parent devrait être mis à jour.

0 commentaires

0
votes

J'ai toujours lu le blog de Chris sur Blazor, de bonnes informations ... EventCallback est un élément de base du modèle de programmation des composants. EventCallback est un type valeur qui encapsule un délégué et résout les problèmes à l'aide de délégués entre les composants. D'abord le composant:

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

Ensuite l'utilisateur du composant:

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

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

Le compilateur a un support intégré pour convertir un délégué en EventCallback et fera d'autres choses pour s'assurer que le processus de rendu a suffisamment d'informations pour distribuer l'événement correctement, l'EventCallback est toujours créé avec une référence au composant qui l'a créé. Ainsi, l'EventCallback est toujours créé avec une référence au composant qui l'a créé. Du point de vue de MyButton - il obtient la valeur EventCallback et la transmet au gestionnaire d'événements onclick. Les gestionnaires d'événements des composants comprennent désormais EventCallback ainsi que les délégués.

0 commentaires

0
votes

Vous devez ajouter un événement sur le composant enfant, puis appeler l'événement parent. Cela devrait fonctionner.

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

0 commentaires