我有一个 Blazor 7 组件,它基本上是一个下拉选项。当做出选择时,会触发一个事件,因此调用页面/组件可以获得所选项目。一个问题是,只有前一项被转移到父项,而不是当前的选择。我不知道如何解决这个问题,因为除了这个怪癖之外,一切似乎都正常。基本上,第一次进行选择时,传递给父级的对象是空的(不是 null)。第二次进行选择时,第一个项目将传递给父项。第三个选择将显示第二个项目,依此类推。这是组件代码:
<h3>DropDownNames</h3>
<select @bind="@mySelector.SelectedId" @bind:after="SelectionChanged">
@foreach (var opt in mySelector.Options)
{
<option value="@opt.Id" class="@opt.Style">@opt.Name @(new String('*', @opt.Stars))</option>
}
</select>
@if (mySelector.SelectedId > 0)
{
selectedOption = mySelector.Options.Find(e => e.Id == mySelector.SelectedId);
}
@code {
[Parameter]
public EventCallback<Option> GetSelectedOption { get; set; }
private Selector mySelector = new Selector(myOptions);
private Option selectedOption { get; set; } = new Option();
//populate the select options
private static List<Option> myOptions = new List<Option>() {
new Option(1, "Fred", "style3", 2),
new Option(2, "Joe", "style1", 4),
new Option(3, "Jana", "style2", 4),
new Option(4, "Mary", "style1", 3),
new Option(5, "Howard", "style3", 1) };
async void SelectionChanged()
{
await GetSelectedOption.InvokeAsync(selectedOption);
}
public class Selector
{
public Selector(List<Option> options) => Options = options;
public int SelectedId { get; set; } = 0;
public List<Option> Options { get; set; }
}
public class Option
{
public Option(int id = 0, string? name = "", string? style = "", int stars = 0)
{
Id = id;
Name = name;
Style = style;
Stars = stars;
}
public int Id { get; set; }
public string? Name { get; set; }
public string? Style { get; set; }
public int Stars { get; set; }
}
}
和父页面(只是索引页面):
@page "/"
<PageTitle>Index</PageTitle>
<DropDownNames GetSelectedOption="getSelectedOption"></DropDownNames>
<br />
<p>You selected: @selectedOption.Id</p>
<p>@selectedOption.Name has @selectedOption.Stars.ToString() stars</p>
@code {
DropDownNames.Option selectedOption = new DropDownNames.Option();
public void getSelectedOption(DropDownNames.Option option)
{
selectedOption = option;
}
}
我相信我在这里做错了什么,但不知道从哪里开始/看。Bing 的人工智能没有任何帮助,因为它会生成无法使用的代码,因此需要向真人寻求帮助。
您更改字段的方式
selectedOption
导致了这里的问题。它在被EventCallback
调用后执行。您应该在调用
SelectionChanged()
之前 将该逻辑移至该方法。EventCallback