使用 blazor 将用户输入的字符串添加到列表中答案

【问题标题】：Add user input of string into a list using blazor使用 blazor 将用户输入的字符串添加到列表中
【发布时间】：2023-03-20 23:36:01
【问题描述】：

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

由于我只能将一个值绑定到文本框，我无法让多个用户输入进入列表。

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

【问题讨论】：

为什么不添加一个按钮？如果您有一个列表，那么您将绑定到列表中的最后一项。使用按钮在列表中添加新条目。
您能否向我们展示您已经尝试过的所有内容以及出了什么问题，否则我们所能做的就是链接到 blazor 文档
用户输入的字符串，是否应该用特定的分隔符（例如换行符或逗号）进行拆分？那么也许你可以定义一个字符串类型的数据绑定属性，setter调用string.Split，getter调用string.Join。
搜索 Blazor Todo，我相信你会找到数百个示例

标签： c# blazor

【解决方案1】：

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

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

在下面的示例中，每当用户按下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);
    }
}

【讨论】：