События в Blazor RenderTreeBuilder

Question

У меня проблемы с использованием привязки событий к компоненту Blazor с использованием RenderTreeBuilder. Я понимаю, как инициировать события, используя прямой подход написания HTML и присоединения события к компоненту. Однако мне сейчас нужно использовать RenderTreeBuilder.

Прямой подход

<input type="text" @bind-value="InputValue" @bind-value:event="oninput" @onkeyup="ChangeCounter" />

Мне нужно получить что-то вроде следующего:

public RenderFragment RenderContent => (builder => 
{
    int i = 0;
    builder.OpenElement(i++, "input");
    // Not an official property
    builder.AddEventCapture(i++, @bind-value, "InputValue");
    // Not an official property
    builder.AddEventCapture(i++, @bind-value:event, "oninput");
    // Not an official property
    builder.AddEventCapture(i++, @onkeyup, "ChangeCounter");
    builder.CloseElement();
});

Thanks in advance

Answer 1

Я немного улучшил ваш элемент html и остановлюсь следующим образом:

 <input type="text" @bind-value="InputValue" @bind-value:event="oninput" 
        @onkeyup="ChangeCounter" />

 <p>@InputValue</p>
 <p>@counter</p>

@code {

    public string InputValue { get; set; } = "Hello, Blazor";
    private string counter;

    private Task ChangeCounter(KeyboardEventArgs args)
    {
        counter = args.Key.ToString();
        return Task.CompletedTask;
    }

Запустите приведенный выше код и дайте компилятору создать этот код ниже. Посмотрите, что делает компилятор, и подражайте этому. Примечание. Код должен быть в \obj\Debug\netcoreapp3.1\Razor\Pages\Index.razor.g.cs, если вы поместили свой код Blazor в компонент Index.

    [Microsoft.AspNetCore.Components.RouteAttribute("/")]
    public partial class Index : Microsoft.AspNetCore.Components.ComponentBase
    {
        protected override void 
     BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder 
                                                                      __builder)
        {
            __builder.OpenElement(0, "input");
            __builder.AddAttribute(1, "type", "text");
            __builder.AddAttribute(2, onkeyup",Microsoft.AspNetCore.Components.EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.KeyboardEventArgs>(this, ChangeCounter ));
            __builder.AddAttribute(3, "value", Microsoft.AspNetCore.Components.BindConverter.FormatValue( InputValue));
            __builder.AddAttribute(4, "oninput", Microsoft.AspNetCore.Components.EventCallback.Factory.CreateBinder(this, __value => InputValue = __value, InputValue));
            __builder.SetUpdatesAttributeName("value");
            __builder.CloseElement();
            __builder.AddMarkupContent(5, "\r\n\r\n");
            __builder.OpenElement(6, "p");
            __builder.AddContent(7, InputValue);
            __builder.CloseElement();
            __builder.AddMarkupContent(8, "\r\n");
            __builder.OpenElement(9, "p");
            __builder.AddContent(10, counter);
            __builder.CloseElement();
        }

Также обратите внимание, как компилятор создает порядковые номера. Это правильный способ сделать это ...

Надеюсь, это поможет ...