Blazor - 下拉菜单的onchange或onclick事件没有触发

Question

 <MudTd Style="text-align: right" DataLabel="Severity">
                <MudSelect Dense="true" T="string" Label="Severity" Variant="Variant.Filled"  Placeholder="Please Select" Required="true" @bind-Value="rcontext.Severity" @onchange="DoStuff">
                    <MudSelectItem @onchange="DoStuff"  Value="@("Acceptable")"/>
                    <MudSelectItem Value="@("Tolerable")" />
                    <MudSelectItem Value="@("Undesirable")" />
                    <MudSelectItem Value="@("Intolerable")" />
                </MudSelect>
         </MudTd>

   void DoStuff(ChangeEventArgs e)
    {
        string selectedString = e.Value.ToString();
        Console.WriteLine("It is definitely: " + selectedString);
    }

我完全无法调用 DoStuff() 函数。我已经添加了 MudSelect 和 MudSelectItem 标签，但是 onchange 或 onclick 事件都没有被触发。

我是否漏掉了什么？

完整代码：

@using System.Net.Http.Json
@using BlazorApp4.Shared.Entities
@using BlazorApp4.Client.Extensions
@inject HttpClient httpClient

<style>
    .mud-table-cell-custom-group {
        font-weight: 500;
    }

    .mud-table-cell-custom-group-footer {
        padding-bottom: 50px;
        text-align: right;
    }
</style>
<br />
<EditForm OnSubmit="somefunc" Model="@Elements">
<MudTable  Breakpoint="Breakpoint.Sm" Height="700px"  
          Items="@Elements"
          GroupBy="@_groupDefinition"
          GroupHeaderStyle="@($"background:{Colors.Grey.Lighten4};")"
          GroupFooterClass="mb-4"
          Dense="true"
          Hover="true"
          HorizontalScrollbar="true"
          Style="width:100%"
          Striped ="false"
          
          @bind-SelectedItem="selectedItem1">
    <ColGroup>
        <col style="width: 5px;" />
        <col  style="width:30%;"/>
        <col  style="width:15%;"/>
        <col  style="width:25%;"/>
        <col  style="width:15%;"/>
        <col  style="width:15%;"/>
        

    </ColGroup>
    <HeaderContent>
       
        <MudTh><h6><b>Identified Risk</b></h6></MudTh>
        <MudTh><h6><b>Yes/No/NA</b></h6></MudTh>
        <MudTh><h6><b>Comments & Discussion</b></h6>    </MudTh>
        <MudTh><h6><b>Likelihood</b>    </h6></MudTh>
        <MudTh><h6><b>Severity</b></h6></MudTh>

          


    </HeaderContent>
    <GroupHeaderTemplate Context="gcontext">
        @*working code -   <MudTh Class="mud-table-cell-custom-group"   colspan="5"><b>@($"{context.GroupName}##{context.Key}##{((context.Items.Sum((e) => e.Rating) >= 5 ) ? "High" : "Low")} ")</b></MudTh> *@
        <MudTh Class="mud-table-cell-custom-group"   colspan="5"><b>@($"{gcontext.GroupName}##{gcontext.Key}##{gcontext.Items.Syngenta<Questionnaire>(":")} ")</b></MudTh>
    </GroupHeaderTemplate> 
    <RowTemplate Context="rcontext">
        @if (true)
        {
            <MudTd  DataLabel="Identified Risk">@((MarkupString)rcontext.IdentifiedRisk)</MudTd>
        }
       <MudTd Style="text-align: right" DataLabel="Yes/No/NA">
                <MudSelect Dense="true" T="string" Label="Answer" Variant="Variant.Filled"  Placeholder="Please Select" Required="true" @bind-Value="rcontext.Yes_No_NA">
                    <MudSelectItem  Value="@("Yes")" />
                    <MudSelectItem Value="@("No")" />
                    <MudSelectItem Value="@("N/A")" />
                   
                </MudSelect>
         </MudTd>
        <MudTd DataLabel="Comments & Discussion">
            @rcontext.Comments_Discussion
            
         </MudTd>
        <MudTd Style="text-align: right" DataLabel="Likelihood">
                <MudSelect Dense="true" T="string" Label="Likelihood" Variant="Variant.Filled"  Placeholder="Please Select" Required="true" @bind-Value="rcontext.Likelihood">
                    <MudSelectItem  Value="@("Improbable")" />
                    <MudSelectItem Value="@("Possible")" />
                    <MudSelectItem Value="@("Probable")" />
                   
                </MudSelect>
         </MudTd>
<MudTd Style="text-align: right" DataLabel="Severity">
    <MudSelect Dense="true" T="string" Label="Severity" Variant="Variant.Filled" Placeholder="Please Select" Required="true" 
               Value="rcontext.Severity" ValueChanged="value => DoStuff(rcontext, value)">
        <MudSelectItem Value="@("Acceptable")" />
        <MudSelectItem Value="@("Tolerable")" />
        <MudSelectItem Value="@("Undesirable")" />
        <MudSelectItem Value="@("Intolerable")" />
    </MudSelect>
</MudTd>
         
@code {
    void DoStuff(YourContextClass  context, string selectedString)
    {
           context.Severity = selectedString;
         Console.WriteLine("It is definitely: " + selectedString);
    }
}


         
    </RowTemplate>

</MudTable>
  <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto">Register Request and Continue</MudButton>

  </EditForm>
@selectedItem1.Likelihood
@*<MudText Inline="true" Class="align-self-center">Selected1: @selectedItem1?.Concati()</MudText>*@


@code {

    [Parameter]
    public string? QuestionnaireFileName { get; set; }

    private TableGroupDefinition<Questionnaire> _groupDefinition = new()
    {
        GroupName = "Group",

        Indentation = false,
        Expandable = true,

        IsInitiallyExpanded = true,

        Selector = (e) => e.GroupBy
    };

           void DoStuff(string  selectedString)
    {
        
        Console.WriteLine("It is definitely: " + selectedString);
    }
    Questionnaire selectedItem1 = new Questionnaire();


    private IEnumerable<Questionnaire>? Elements = new List<Questionnaire>();

    void somefunc(EditContext ed)
    {
        StateHasChanged();
    }

    void DoStuffDup()
    {
        
        Console.WriteLine("It is definitely duplicate: ");
    }
   
    protected override async Task OnInitializedAsync()
    {
        
        Elements = await httpClient.GetFromJsonAsync<List<Questionnaire>>($"api/questions/{QuestionnaireFileName}");
    }

   
   
}

- Venkat

---

不起作用啊兄弟。 - Venkat

Answer 1

@bind-Value="rcontext.Severity" 语法会自动处理 EventCallback 并将所选值分配给 rcontext.Severity。

相反，您可以使用手动事件绑定：

Value="rcontext.Severity" ValueChanged="value => HandleSeverityChanged(rcontext, value)"

你需要手动处理 EventCallback：

void HandleSeverityChanged(Questionnaire context, string value)
{
     context.Severity = value;
}

因此，针对您的情况，您的代码应该如下所示：

<MudTd Style="text-align: right" DataLabel="Severity">
    <MudSelect Dense="true" T="string" Label="Severity" Variant="Variant.Filled" Placeholder="Please Select" Required="true" 
               Value="rcontext.Severity" ValueChanged="value => DoStuff(rcontext, value)">
        <MudSelectItem Value="@("Acceptable")" />
        <MudSelectItem Value="@("Tolerable")" />
        <MudSelectItem Value="@("Undesirable")" />
        <MudSelectItem Value="@("Intolerable")" />
    </MudSelect>
</MudTd>
         
@code {
    void DoStuff(Questionnaire context, string selectedString)
    {
         context.Severity = selectedString;
         Console.WriteLine("It is definitely: " + selectedString);
    }
}

- Dimitris Maragkos

---

嘿，这个 rcontext 是一个上下文对象，而 DoStuff 函数无法访问 tcontext 对象。 - Venkat

你可以将上下文对象传递给你的 DoStuff 方法。我已经在答案中更新了示例。 - Dimitris Maragkos