如何知道 EventCallback 何时被触发？

Question

I'm doing some testing with razor components but I have an issue to update a property from the child component to the grand-parent component.

I'm using EventCallback to update my parent component when the child component updates a property. It works well for architecture with two levels (ParentComponent/ChildComponent) however, it doesn't work with three levels (GrandParentComponent/ParentComponent/ChildComponent).

Let's take an example with three components A, B and C.

- A (GrandParentComponent)
-- B (ParentComponent)
--- C (ChildComponent)

• Updating B will fire EventCallback to update A
• Updating C will fire EventCallback to update B, however at this stage B doesn't trigger EventCallback once updated so the A component is still not updated.

How can you know if a component has been updated by an EventCallback.

I would like to know that so I can trigger EventCallback from B when EventCallback from C has been fired. Does it make sense? :D

Answer 1

How to know when EventCallback has been fired?

Define a an event delegate that you can trigger when the EventCallback is fired... just jocking.

You can do that in various ways. Here's one:

ComponentA.razor

<ComponentB ComponentBEvent="EventCallback.Factory.Create<string>(this, 
          mymethod)"></ComponentB>
<p>Message from Component A @message</p>

@code {
    private string message;

    private Task mymethod(string str)
   {
       message = str;
       return  Task.CompletedTask;
   }
}

ComponentB.razor

<ComponentC ComponentCEvent="EventCallback.Factory.Create<string>(this, 
                                                     mymethod)"></ComponentC>

<p>Message from Component B @message</p>

@code {
    string myvalue;
    [Parameter]
    public EventCallback<string> ComponentBEvent { get; set; }

    private string message;

    private async Task mymethod(string str)
    {
         message = str;

        if(ComponentBEvent.HasDelegate)
        {
           await ComponentBEvent.InvokeAsync(str);
        }
    }
 }

ComponentC.razor

<input type="text" value="@myvalue" @oninput="@((args) => { myvalue = 
   args.Value.ToString(); ComponentCEvent.InvokeAsync(args.Value.ToString()); 
})" />


<p>Message from Component C @myvalue</p>

@code {
     string myvalue;
     [Parameter]
     public EventCallback<string> ComponentCEvent { get; set; }
}

Usage

<ComponentA />

Note: You may implement this behavior using a notifier service, which employ the state pattern. This service control the state of objects, update, delete, etc., and define events that are fired when an action occurs, say, an employee object was added in component A, in which case the notifier service notifies all interested parties (subscribing components) of this fact.

Hope this helps...