이벤트 처리 2

람다식

람다식을 이용하여 이벤트 처리기로 사용할 수 있다. 

@page "/event-handler-lambda"

<h1>@heading</h1>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

for 루프 에서 람다식을 이용하고 for 루프의 increase index 를 사용할 경우

변수를 capture 해야 한다. 

@page "/event-handler-lambda-for"

<h1>@heading</h1>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
    {
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
    }
}

 

EventCallback

child 쪽 button 을 click 했을때 해당 button 에 mouse  point 를 얻어오는 코드

Pages/Child.razor

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

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

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

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

Pages/Parent.razor

@page "/parent"

<h1>Parent-child example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="@ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e)
    {
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
    }
}

기본 작업 방지

<input> element 에 focus 를 두고 key 를 입력하면 해당 key 가 입력되는 동작이 기본 동작이다.

이러한 기본 작업을 방지 할 수 있다. 아래 코드를 보자. 

@page "/event/prevent-default"

<p>
    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        } 

        if (e.Key == "-")
        {
            count--;
        }
    }
}

@onkeydown:preventDefault 가 키 입력 작업을 방지하게 한다. 

대신 + 를 누르면 count 가 오르고 , - 를 누르면 count 가 내려간다.

 

이벤트 전파 중지

HTML 자식 element 이벤트가 부모 element 로 전파되지 않는 것

Pages/StopPropagation.razor

@page "/event/stop-propagation"

<label>
    <input @bind="stopPropagation" type="checkbox" />
    Stop Propagation
</label>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that doesn't stop propagation when selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string? message; 

    private void OnSelectParentDiv() =>
        message += $" The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() =>
        message = $"A child div was selected. {DateTime.Now}";
}

 

요소에 포커스

@ref 를 통해 <input> element 의 참조를 하고 해당 참조의 FocusAsync() 를 통해 해당 요소에 Focus 를 둔다.

Pages/Focus.razor

@page "/event/focus"

<p>
    <span>Name : </span><input @ref="nameInput" />
    <span>Age : </span><input @ref="ageInput" />
</p>

<button @onclick='()=>ChangeFocus("N")'>
    Focus the Name Element
</button>
<button @onclick='()=>ChangeFocus("A")'>
    Focus the Age Element
</button>
@code {
    private ElementReference nameInput;
    private ElementReference ageInput;

    private async Task ChangeFocus(string reference)
    {
        if(reference=="A")
        await ageInput.FocusAsync();
        else
        await nameInput.FocusAsync();
    }
}

 

 

관련영상

https://youtu.be/nVsc-mm8HmY