如何使用 SELECT 组件在 Blazor 中获得双向绑定？

Question

我已经搜索了 SO，关于这个主题有几个问题和答案，但没有一个解决这个特定问题。

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

我想单击下拉列表（选择/选项），选择一个选项，然后自动更新父级中的变量。

如果我不使用组件，我可以让它工作。但是我可以从组件中让它工作的唯一方法是我还在组件中使用一个按钮（请参阅组件代码中的按钮）。但最终会从同一个父级调用多个组件。每个组件都有一个单独的按钮是不切实际的。所以按钮必须消失。

该@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);
    }
}

我遵循了一些实现事件的 groovy 示例，但我发现没有一个真正解决了问题。

Answer 1

此代码片段正在运行。试试看... 运行代码并开始输入单词Item 3。当您键入时，您将看到从子组件和父组件显示的类型文本。键入 Item 3 后，您会注意到文本Item 3显示在组合框中。从组合框中选择一个项目，它会出现在父级的输入框中。

选择Component.razor

    <div style="border:solid 1px red">
     <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>
 <p>@Item</p>

 @code {
  public IEnumerable<string> list = new List<string>()
 {
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5"
 };


 private string item { get; set; } 

 [Parameter]
 public string Item
 {
    get { return item; }
    set
    {
        if (item != value)
        {
            item = value;
            if (ItemChanged.HasDelegate)
            {
                ItemChanged.InvokeAsync(value);
            }
        }
    }
  }

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

测试.razor

@page "/test"

<div>

<label for="parentValue">Parent Value</label>

<input type="text" id="parentValue" @bind="@Param" 
     @bind:event="oninput" />

<p>@Param</p>
</div>

<div>

<SelectComponent @bind-Item="@Param"/>
</div>

@code {
  [Parameter]
public string Param { get; set; } = string.Empty;

}

祝你好运...如果有什么不清楚的，不要犹豫，问...