Blazor EventCallback<T> 为 Null

Question

我有一个 SSR 父组件和一个具有 InteractiveServer 渲染模式的子组件。我需要这个子组件是交互式的，以便我可以绑定到 @onclick 等事件。我想使用 EventCallback 将数据/值传递回父级，但我猜由于渲染模式不同，这个委托永远不会设置，是否还有另一个怎么办？

家长剃刀

<Child
  @rendermode="InteractiveServer"
  OnNameEntered="@DisplayName"/>

@code {
  
  public void DisplayName(string result) {
     Console.WriteLine($"Result is {result}");
  }
}

儿童剃须刀

<input @bind="name"/>
<button type="button" @onclick="NameEntered">Click</button>

@code {
  [Parameter]
  public EventCallback<string> OnNameEntered { get; set; }

  private string name;
 
  public async Task NameEntered() {
    await OnNameEntered.InvokeAsync(name);
  }

我尝试删除子组件上的 InteractiveRender 模式，委托将正确传递给子组件，但随后它将删除该组件内的所有交互性。

Answer 1

您可以尝试不使用InteractiveServer，然后使用提交表单使按钮在SSR中工作。尝试以下操作：
家长剃刀

<Child NameChanged="DisplayName"/>
@code {
    public void DisplayName(string result)
    {
        Console.WriteLine($"Result is {result}");
    }
}

儿童剃须刀

<form method="post" @onsubmit="NameEntered" @formname="form1">
    <AntiforgeryToken />
    <InputText @bind-Value="name" />
    <button type="submit">Submit</button>
</form>

@code {
    [Parameter]
    public EventCallback<string> NameChanged { get; set; }

    [SupplyParameterFromForm]
    private string name { get; set; }

    protected override void OnInitialized() => name ??= "";

    public async Task NameEntered() {
        await NameChanged.InvokeAsync(name);
    }
}

测试结果

顺便说一句，我认为更好的方法是让身份验证提供程序同时在 Interactive 和 SSR 上工作。