Демонстрация использования `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);
}
}