如何在Blazor中使用SELECT组件进行双向绑定？

Question

我已经搜索过，关于此主题有一些问题和答案，但没有一个能解决这个特定问题。

我正在尝试编写一个使用<select...>的Blazor组件，以更新从父级传入的变量。]​​>

我想单击下拉菜单（选择/选项），选择一个选项，并自动在父级中更新变量。

如果不使用组件，我可以使其正常工作。但是，使它在组件中运行的唯一方法是，如果我还在组件中使用一个按钮（请参见组件代码中的按钮）。但是最终将有多个组件由同一个父组件调用。每个组件都有一个单独的按钮是不切实际的。因此按钮必须消失。

<< [@ bind

使用“ onchange”参数进行选择，因此甚至无法编译。我已经尝试过

CascadingValue / CascadingParam

，但这也不会更新父值（除非我使用按钮...）这里是父母：

@page "/test"
@page "/test/{param}"

@namespace ComponentTest.Pages

@using System.Web
@using ComponentTest.Pages

<h3>Test Page</h3>

<div class="border col-3">
    <h4>Parent</h4>
    <hr />
    <label for="parentValue">Parent Value</label>
    <input id="parentValue" @bind="@param"/>
</div>
<div class="col-3">&nbsp</div>
<div class="border col-3">
    <h4>Component Select</h4>
    <hr />
    <SelectComponent @bind-Item="@param"/>
</div>

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

这是组件：

@using System.Collections.Generic
@using System.Web

<div class="form-group">
    <p>Component Value = @Item</p>
    <label for="Site" class="font-weight-bold form-check-label">List</label>
    @if (list == null)
    {
        <input id="Item" class="form-control-sm" @bind="@Item" />
    }
    else
    {
        <select id="Item" class="form-control-sm" @bind="@Item">
            @foreach (var l in list)
            {
                @if (Item != null && String.Equals(l, Item, StringComparison.OrdinalIgnoreCase))
                {
                    <option selected value="@l">@l</option>
                }
                else
                {
                    <option value="@l">@l</option>
                }
            }
        </select>
    }
</div>
<button @onclick="UpdateParentsItem" class="btn btn-primary">Update Parent</button>
@code {
    public IEnumerable<string> list = new List<string>()
{
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5"
    };

    [Parameter]
    public string Item { get; set; }

    [Parameter]
    public EventCallback<string> ItemChanged { get; set; }

    private async Task UpdateParentsItem()
    {
        await ItemChanged.InvokeAsync(Item);
    }
}

我遵循了一些用于实现事件的常规示例，但我发现并没有实际解决问题的方法。

我已经进行了搜索，关于此主题有几个问题和答案，但是没有一个可以解决这个特定问题。我正在尝试编写一个使用

，更新...

Answer 1

此代码段有效。尝试...运行代码，然后开始输入单词

Item 3