事件未在select-blazor中启动

Question

@page "/dd"
<select class="form-control" @bind="@selectedString"  style="width:150px">
@foreach (string template in templates)
{
<option  @onclick="(()=>dosomething())" value=@template>@template</option>
}
</select>
<h5>Selected Country is: @selectedString</h5>
<h5>Selected Country is: @selectedStringDup</h5>
@code {
List<string> templates = new List<string>() { "America", "China", "India", "Russia", "England" };
string selectedString = "America";
string selectedStringDup = "";
void OnSelect (ChangeEventArgs e)
{
selectedString = e.Value.ToString();
Console.WriteLine("The selected country is : " + selectedString);
}
void dosomething()
{
selectedStringDup = "Russia" + DateTime.Now.ToString();

}
void OnSelect (MouseEventArgs e)
{

Console.WriteLine("The selected country is : " + selectedString);
}
}

这是我在选项标签内的onclick事件不起作用。它根本没有开火。既不是onchange，也不是onselectedchange。在选择组合框中的值后，我们如何激发事件？

Answer 1

@bind="@selectedString"语法自动处理EventCallback，并将所选值分配给selectedString字段。

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

<select value="@selectedString" @onchange="HandleChange">

并手动处理EventCallback：

void HandleChange(ChangeEventArgs e)
{
// using ?. to check for null
selectedString = e?.Value?.ToString();
}

因此，对于您的场景(与其他问题类似(，您的代码应该如下所示：

@page "/dd"
<select class="form-control" value="@selectedString" @onchange="OnSelect" style="width:150px">
@foreach (string template in templates)
{
<option value=@template>@template</option>
}
</select>
<h5>Selected Country is: @selectedString</h5>
<h5>Selected Country is: @selectedStringDup</h5>
@code {
List<string> templates = new List<string>() { "America", "China", "India", "Russia", "England" };
string selectedString = "America";
string selectedStringDup = "";
void OnSelect(ChangeEventArgs e)
{
selectedString = e?.Value?.ToString();
Console.WriteLine("The selected country is : " + selectedString);
}
}

Answer 2

您仍然可以使用InputSelect，但您还需要提供Value和ValueChanged和/或ValueExpression:

//Code behinde
private List<string> templates { get; set; } = new List<string>() { "America", "China", "India", "Russia", "England" };
private string selectedString { get; set; } = "America";
private Task OnValueChanged(string value)
{
selectedString = value;
Console.WriteLine("The selected country is : " + selectedString);
return Task.CompletedTask;
}
//Razor page
<EditForm Model=selectedString>
<InputSelect ValueExpression="@(()=> selectedString)" 
Value="@selectedString" 
ValueChanged="@((string value) => OnValueChanged(value ))">
<option value="">select...</option>
@foreach (var country in templates)
{
<option value="@country">@country</option>
}

</InputSelect>
</EditForm>

参见fiddle