Blazor RenderTreeBuilder 中的事件

Question

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

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

希望这可以帮助...