將按鈕綁定到子組件 blazor

Question

這是我的小提琴https://blazorfiddle.com/s/d15hrars

我有一個 select 組件，它更改了表的 class。 還有一個按鈕可以設置 select 組件的選定值。 但按下按鈕不會更新下拉列表中的選定值（select 組件）

所以按下按鈕會突出顯示 San Jose 行，但不會更新下拉列表。 不知道為什么

父組件

@page "/"

  <table class="table table-sm table-bordered table-striped">
    <thead>
        <tr>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
  @foreach (string c in Cities)
        {
            <tr class="@GetClass(c)">
                <td>@c</td>
            </tr>
        }
    </tbody>
    </table>

<SelectFilter values="@Cities"
              title="@SelectTitle"
              @bind-SelectedValue="SelectedCity"/>

<button class="btn btn-primary"
        @onclick="@(() => SelectedCity = "San Jose")">
    Change
</button>

@functions {
    string[] Cities = new string[] { "New York", "Los Angeles", "Denver", "San Jose" };

    public string SelectedCity { get; set; }

    public string GetClass(string city) =>
        SelectedCity == city ? "bg-info text-white" : "";

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

子組件

<div class="form-group">
    <label for="select-@Title">@Title</label>
    <select name="select-@Title"
            class="form-control"
           @onchange="HandleSelect"
            value="@SelectedValue"
            @attributes="Attrs">
        <option disabled selected>Select @Title</option>
        @foreach (string val in Values)
        {
            <option value="@val" selected="@(val == SelectedValue)">@val</option>
        }
    </select>
</div>

@code {
    [Parameter]
    public IEnumerable<string> Values { get; set; } = Enumerable.Empty<string>();

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

    public string Title { get; set; } = "Placeholder";

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> Attrs { get; set; }

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

    public async Task HandleSelect(ChangeEventArgs e)
    {
        SelectedValue = e.Value as string;
        await SelectedValueChanged.InvokeAsync(SelectedValue);
    }
}

Answer 1

您的子組件缺少Parameter屬性。

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