Events in Blazor

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті.

Привіт!

Подивимось, як можна передати дані з одного компонента в інший. Для початку я створю дві кнопки, при натисканні яких будуть передаватись дані в інший компонент.

Button

Я створю компонент з назвою ThumbButton, який буде містити дві кнопки. В залежності, яка кнопка натиснута, буде викликатись відповідний метод і передавати дані в parrent-компонент. В @onclick вказується, який метод буде викликатись при настискані кнопки.

Для того, щоб передати дані в parrent-компонент, використовується властивість типу EventCallback<Thumb>, де Thumb — це enum. Замість enum може бути будь-який інший тип даних. У метод ThumbUp i ThumbDown викликаю OnVote.InvokeAsync, в який передається відповідний enum. Цей виклик передає дані в parrent-компонент.

<button class="btn btn-primary mx-2" @onclick="ThumbUp">
    <span class="oi oi-thumb-up"></span>
</button>

<button class="btn btn-danger mx-2" @onclick="ThumbDown">
    <span class="oi oi-thumb-down"></span>
</button>

@code {

    public EventCallback<Thumb> OnVote { get; set; }

    private void ThumbUp()
    {
        OnVote.InvokeAsync(Thumb.Up);
    }

    private void ThumbDown()
    {
        OnVote.InvokeAsync(Thumb.Down);
    }

    public enum Thumb
    {
        Up,
        Down
    }
}

Тепер цей компонент можна перевикористати на будь-якій сторінці.

Button Component on page

Тепер візьмемо сторінку Counter. І додамо щойно створений компонент з кнопкою. Розпочнемо з коду. Я створю дві властивості isThumbUp i isThumbDown типу bool. В залежності від того, яка властивість набуде значення true, відповідні дані будуть відображатись. Також якщо одна з цих властивостей набуде значення true, кнопка зникне.

Для того, щоб отримати дані з компонента кнопки, потрібен хендлер, який буде міняти значення isThumbUp i isThumbDown у відповідь на натискання кнопки <ThumbButton OnVote="OnVotedHandler"></ThumbButton>. Метод хендлер має приймати на вхід параметер типу який передається з кнопки. . В залежності від того яке значення прийшло на вхід встановлюється значення параметрів i .

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@if (isThumbUp)
{
    <p class="text-success">Your thumb is up</p>
}

@if (isThumbDown)
{
    <p class="text-danger">Your thumb is down</p>
}

@if (!isThumbDown && !isThumbUp)
{
    <div class="row">
        <div class="col-12">
            <ThumbButton OnVote="OnVotedHandler"></ThumbButton>
        </div>
    </div>
}

@code
{
    private bool isThumbUp = false;
    private bool isThumbDown = false;
    private void OnVotedHandler(ThumbButton.Thumb result)
    {
        if (result == ThumbButton.Thumb.Up)
        {
            isThumbUp = true;
        }
        else if (result == ThumbButton.Thumb.Down)
        {
            isThumbDown = true;
        }
    }
}