Estou trabalhando na minha versão de um componente de preenchimento automático em um aplicativo Blazor WASM (autônomo) voltado para o .NET 9.
Eu consigo vincular um input
a uma string
variável e tomar uma ação conforme o usuário digita sua palavra-chave de pesquisa usando @bind:after
o código a seguir e funciona bem, mas quando tento mover a UI do meu autocompletar para um componente, vincular o input
à minha variável parece não funcionar. A bind:after
parte continua funcionando bem e eu aperto meu método após cada pressionamento de tecla.
Aqui está o código que funciona bem e que então movo para um componente:
...
<input @bind="UserInputText" @bind:event="oninput" @bind:after="OnUserInputChanged" />
...
@code {
private string? UserInputText = "";
private void OnUserInputChanged()
{
// Process user input and make suggestions
}
}
Em seguida, pego a parte da interface do usuário e a coloco em um novo componente que estou criando para encapsular o preenchimento automático em seu próprio componente.
Aqui está o código pai:
...
<AutoComplete UserInputText="UserInput" UserInputTextChangedHandler="OnUserInputChanged" />
...
@code {
private string? UserInput = "";
private void OnUserInputChanged()
{
// Process user input and make suggestions
}
}
E aqui está o código dentro do AutoComplete
componente:
@typeparam TItem
<div>
<input @bind="UserInputText" @bind:event="oninput" @bind:after="UserInputTextChangedHandler" />
</div>
@code {
[Parameter]
public string? UserInputText { get; set; }
[Parameter]
public Action UserInputTextChangedHandler { get; set; }
[Parameter]
public List<TItem> Suggestions { get; set; }
}
A propósito, tentei usar EventCallback
em vez de Action
para passar OnUserInputChanged
para o componente de preenchimento automático, mas então recebo um erro que diz:
Argumento 1: não é possível converter de 'Microsoft.AspNetCore.Components.EventCallback' para 'System.Action'
Por favor, tenha em mente também que a fiação OnUserInputChanged
continua funcionando bem mesmo depois que eu coloco essa lógica no novo componente. A parte que não funciona mais está vinculada UserInputText
ao input
interior do componente.
Onde estou cometendo um erro?