blazor - Blazor 中的 StateHasChanged 目标

问题描述

看看这个非常基本的组件：

<div>
    @param1
    <button @onclick="@btn_on_click">Cliquez là</button>
</div>

@code
{
    [Parameter]
    public int param1 { get; set; }

    [Parameter]
    public Action<int> on_evt_test_fire { get; set; }

    void btn_on_click()
    {
        param1 += 1;
        this.on_evt_test_fire(param1);
    }
}

看看这个非常基本的页面：

@message

<button @onclick="@on_btn_click">Click me</button>

<MyComponent param1="1"  on_evt_test_fire="@on_evt" />
<MyComponent param1="2" on_evt_test_fire="@on_evt" />

@code 
{
    private String message = "";

    private void on_evt(int param_evt)
    {
        message = "Button clicked inside component";

        StateHasChanged();
    }

    private async Task on_btn_click()
    {
        message = "Button clicked in this page";
    }
}

我对 StateHasChanged() 有疑问。

我的第一个问题是：为什么我应该在 on_evt 中调用 StateHasChanged，而在 on_btn_click 中却没有必要。这两种方法之间的唯一区别是第一种是从组件内部调用的。在这种特定情况下，我为什么要调用 StateHasChanged ？
当我调用 StateHasChanged() 时，这两个组件被重置：它们采用初始值...

谢谢你的帮助

标签： blazorblazor-server-side

而在 on_btn_click 中没有必要

on_btn_click 不需要，因为 UI 事件会自动调用 StateHasChanged 方法。

[Parameter]
  public Action<int> on_evt_test_fire { get; set; }

您不应该使用 Action 委托。请改用 EventCallback 'delegate'，如下所示：

注意：当你使用 Action 委托时，事件的目标是当前组件（子组件），但是当你使用 EventCallback 时，目标是父组件，这就是为什么你不需要添加对 StateHasChanged 的调用方法。在发现 EventCallback 之前，我们必须调用 StateHasChanged 方法。那是很久以前的事了...

[Parameter]
public EventCallback<int> on_evt_test_fire { get; set; }

你应该这样称呼它：

public async Task btn_on_click()
{
   if( on_evt_test_fire.HasDelegate)
   {
       temp++;
       await on_evt_test_fire.InvokeAsync(temp);
    }
 }

您不应使用 param1 参数来增加其值。定义一个新变量并在 OnInitialized 方法中为其分配 param1 的值，如下所示：

  protected override void OnInitialized()
  {
      temp = param1;
  }

当我调用 StateHasChanged() 时，这两个组件被重置：它们采用初始值..

不要创建写入自己的参数属性的组件参数在以下情况下会被覆盖：

子组件的内容使用 RenderFragment 呈现。

StateHasChanged 在父组件中被调用。参数被重置，因为在调用 StateHasChanged 并且向子组件提供新参数值时父组件会重新呈现。

来源：

在这里查看更多：

blazor - Blazor 中的 StateHasChanged 目标

问题描述

解决方案

推荐阅读