blazor - Blazor RenderTreeBuilder 中的事件

Question

我在使用 RenderTreeBuilder 的 Blazor 组件上使用事件绑定(bind)时遇到问题。我了解如何使用编写 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();
        }

另请注意编译器如何生成序列号。这才是正确的做法……

希望这有助于...