时间戳

首页 > 解决方案 > 使用 blazor 将用户输入的字符串添加到列表中

c# - 使用 blazor 将用户输入的字符串添加到列表中

问题描述

我的任务是使用 blazor 将用户从表单输入的字符串添加到字符串列表中。据我所知，您无法绑定值列表，因为它只接受类型字符串。

由于我只能将一个值绑定到文本框，因此我无法拥有多个可以进入列表的用户输入。

有没有一种方法可以让我将用户输入输入到列表中，然后将更多用户输入输入到同一个列表中，但只使用分配给 bind-Value 参数的一个变量？

标签： c#blazor

解决方案

您需要手动从输入中获取项目并将它们添加到列表中。

实现此目的的一种方法是使用监听特定的 Key 事件@onkeydown。

在下面的示例中，每当用户按下时，Enter我们都会将输入的任何内容Input添加到列表中，然后清除输入以便用户可以输入更多项目。

@page "/"

<input @bind-value="UserInput" @bind-value:event="oninput" @onkeydown="CheckInput"></input>

<h2>My List</h2>

@foreach (var item in myList)
{
    <h3>@item</h3>
}

@code {

    private string UserInput { get; set; }
    public List<string> myList = new List<string> { "ItemOne" };

    private void CheckInput(KeyboardEventArgs keyEvent)
    {
        if(keyEvent.Key == "Enter")
        {
            AddToList(UserInput);
            UserInput = string.Empty;
        }

    }

    private void AddToList(string str)
    {
        myList.Add(str);
    }
}

推荐阅读