[Blazor] Keyboard Enter Event 구현

개요

• Blazor 에서 Button 컴포넌트에 Enter Key 이벤트를 구현하는 방법에 대해서 정리 진행합니다.

Keyboard Enter Key Event 구현 방법

• Blazor 에서 Keyboard Enter Key Event 를 구현하는 방법은 구글링을 하면 여러 방법들이 나오게 됩니다.
• 여기서 저는 많은 사람들이 권장? 하는 방법으로 Enter Key 이벤트를 구현해 보았습니다.
• 제가 사용한 방법은, HTML 태그에서 form 태그를 사용한 방식입니다.
• form 태그를 사용하게 되면, form 태그 안에 있는 자식 요소 태그들의 키 이벤트를 브라우저가 작업을 수행해 줍니다.
• 해당 정보는 StackOverFlow 에서 찾은 내용입니다.

시나리오

• 그럼, 실제 Enter 키 이벤트가 정상적으로 동작하는지 테스트 하기 위한 예제 코드를 작성해 봅니다.
• 예제 코드는 TodoList 를 통해 작성을 할 것이고, 여기서 InputComponent.razor 에 있는 Button 컨트롤이 Enter Key 이벤트가 동작되도록 코드를 작성할 예정입니다.
• 그럼 실제 코드를 작성해 보겠습니다.

InputComponent.razor

<form @onsubmit=Enter>
    <div>
        <input class="text" placeholder="할 일을 입력 후, Enter 를 누르세요"
                @bind-value="newTodo" />
        <button @onclick="(() => OnClick.InvokeAsync(newTodo))">Add todo</button>
    </div>
</form>


@code {
    [Parameter]
    public string? newTodo { get; set; }
    [Parameter]
    public EventCallback<string> OnClick { get; set; }
    [Parameter]
    public EventCallback Enter{ get; set; }
}

• 위 코드에서 핵십은 div, input, button 태그들을 form 태그로 감쌌다는 것입니다.
• 그리고, form 태그에는 @onsubmit=Enter 라고 해서 Enter 키 이벤트 핸들러를 수행시킬 수 있도록 이벤트를 선언해 주었습니다.
• 위와 같이 코드를 작성하게 되면, form 영역에 있는 태그들은 브라우저에서 Enter 키가 수행되도록 해줍니다.
• 그럼 이제 InputComponent.razor 자식 컴포넌트를 부모 컴포넌트인 Todo.razor 에 선언하여 어떻게 Enter 키 이벤트 핸들러를 작성하는지 코드를 통해 보여드리겠습니다.

Todo.razor

@page "/todo"

@using ToDoList.Component
@using ToDoList.Data

<PageTitle>Todo</PageTitle>

<InputComponent newTodo="@newTodo"
                Enter="Enter"
                OnClick="AddTodo">
</InputComponent>


@code {
    private List<TodoItem> todos = new();
    private string? newTodo { get; set; }

    private void AddTodo(string keyword)
    {
        if (!string.IsNullOrWhiteSpace(keyword))
        {
            var newId = todos.Count > 0 ? todos.Max(t => t.Id) + 1 : 1;
            todos.Add(new TodoItem { Id = newId, Title = keyword });
            newTodo = string.Empty;
        }
    }

    private void Enter()
    {
        AddTodo(newTodo);
    }
}

• 위와 같이 <InputComponent></InputComponent> 태그 속성으로 Enter=Enter 라고 하여 Enter 이벤트 핸들러를 등록해 주었습니다.
• 그리고, @code 영역에서 Enter 메서드에서는 Enter 키가 입력 되었을 떄 AdddTodo 메서드를 호출하도록 하였습니다.
• 위와 같이 하게 되면, Keyboardeventargs 를 사용하지 않아도 Enter Key 이벤트를 구현할 수 있습니다.