Eu tenho um componente Blazor 7 que é basicamente uma seleção suspensa. Quando uma seleção é feita, um evento é acionado, para que a página/componente chamador possa obter o item selecionado. Um problema é que apenas o item anterior é transferido para o pai, não a seleção atual. Não sei como resolver isso, pois tudo parece estar funcionando além dessa peculiaridade. Basicamente, na primeira vez que você faz uma seleção, o objeto passado para o pai está vazio (não nulo). Na segunda vez que você faz uma seleção, o primeiro item é passado para o pai. Uma terceira seleção mostrará o segundo item e assim por diante. Aqui está o código do componente:
<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; }
}
}
e a página pai (apenas a página de índice):
@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;
}
}
Acredito que estou fazendo algo errado aqui, mas não sei por onde começar/procurar. A IA do Bing não ajudou em nada, pois gera código inutilizável, portanto, procure ajuda de pessoas reais.
A maneira como você está alterando o
selectedOption
campo está causando o problema aqui. Ele está sendo executado depois que oEventCallback
é invocado.Você deve mover essa lógica para o
SelectionChanged()
método, logo antes de serEventCallback
invocado.