Демонстрация использования `EventCallback` и 'RenderFragment'

Как передать обратный вызов события `EventCallback` из дочернего компонента в родительский.
`EventCallback` выполняет метод-'обработчик события' в родительском компоненте при возникновении события в дочернем компоненте.

Это дочерний компонент

Это содержимое дочернего компонента предоставлено родительским компонентом.

  • - Это коoрдинаты указателя мыши кнопки дочернего компонента, полученные из методе-обработчика события вызванного в компоненте предке
  • - Это прирост `Int i++` инициированнвый в дочернем компоненте, полученный из методе-обработчика события вызванного в компоненте предке
Исходный код

-------------------------Pages\Events\EventCallback\Parent.razor................Предок
@page "/parent-EventCallback"


<p>
    <b>`EventCallback`</b> выполняет метод-'обработчик события' в родительском компоненте при возникновении события в дочернем компоненте
</p>

<Child Title="Это дочерний компонент" OnClickCallback="@ShowMessage" OnIntegerCallback="@Increment">
    Это содержимое дочернего компонента предоставлено родительским компонентом.
</Child>

<p><b></b>  - Это коoрдинаты указателя мыши кнопки дочернего компонента, полученные из методе-обработчика события вызванного в компоненте предке</p>
<p><b></b> - Это прирост `Int i++` инициированнвый в дочернем компоненте, полученный из методе-обработчика события вызванного в компоненте предке</p>


                @code {
                    private string message;
                    private string Inc;

                    // Вызваемый обработчик события из дочернего компонента
                    private void ShowMessage(MouseEventArgs e)
                    {
                        message = $"X={e.ScreenX}; Y={e.ScreenY}";
                    }

                    // Вызваемый обработчик события из дочернего компонента
                    private void Increment(int i)
                    {
                        Inc = i.ToString();
                    }
}



-------------------------Pages\Events\EventCallback\Child.razor------------Наследник


<div style="background-color:lightgray; padding:1rem; border: 1px">

    <b>@Title</b>
    <p>
        @ChildContent
    </p>

    <p>
        <button @onclick="OnClickCallback" title="Получить координаты мыши. Событие обратного вызова - EventCallback">
            Показать в родительском компоненте координаты этой кнопки, этого дочернего компонента
        </button>
    </p>
    <button @onclick="IntegerCallback" title=" Это прирост `Int i++`. `EventCallback<int>`">
         Показать в родительском компоненте увеличиное значение на +1
    </button>

</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }

    [Parameter]
    public EventCallback<int> OnIntegerCallback { get; set; }


    int i;

    async Task IntegerCallback()
    {
        i++;
        await OnIntegerCallback.InvokeAsync(i);
    }
}
            
An error has occurred. This application may no longer respond until reloaded. Reload 🗙
Web hosting by Somee.com