参数变化的执行方法

Ber*_*ian 5 c# onchange blazor

给定一个子组件和一个父组件,我试图child在 aparameter发生变化时(从父组件)执行一个方法。

家长

<Child value=@IsChanged></Child>

<button onclick="Update"></button>

@functions(){
  public bool IsChanged{get;set;}
  public void Update()
  {
   this.IsChanged!=this.IsChanged;
  }
Run Code Online (Sandbox Code Playgroud)

孩子

@(value?"True":"False")
@functions()
{
  [Parameter]
  protected bool value {get;set;}
  
  public void SideEffect()
  {
    Console.WriteLine("has changed"); //i want this method executed when value changes from parent
  }
Run Code Online (Sandbox Code Playgroud)

如您所见,我需要Child在参数的onchange 中执行该方法。该参数在父级中已更改。

PS
我看过onchange事件处理程序,但我需要在[Parameter].

Chr*_*nty 18

您应该覆盖OnParametersSetorOnParametersSetAsync生命周期方法。

孩子

@(_value ? "True" : "False")

@code()
{
  private bool _value;

  [Parameter] public bool Value { get; set; }

  protected override void OnInitialized()
  {
      _value = Value;
  }

  protected override void OnParametersSet()
  {
      if (_value != Value)
      {
          _value = Value;
          Console.WriteLine("a parameter has changed");
      }
  }
}
Run Code Online (Sandbox Code Playgroud)

  • @BrianMacKay 这实际上取决于你需要做什么。如果您查看 Blazor 源代码,这种模式很常见。它们保留参数的本地副本,然后在 OnParametersSet 生命周期中检查它们是否有更改。他们这样做是出于性能原因,因此仅复制具有性能影响的参数。 (3认同)

Isa*_*aac 12

这是您问题的最佳和更简单的解决方案

儿童剃须刀

    @( _Value ? "True" : "False")


<div>@message</div>

@code
{
    [Parameter]
    public bool Value { get;set; }
  // [Parameter]
  //  public EventCallback<bool> ValueChanged { get;set; }

    private bool _value;
    private bool _Value
    {
        get => _value;
        set 
        {
            if ( _value != value)
            {
                _value = value;
                SideEffect();
              //  ValueChanged.InvokeAsync(_value);        
            }
        }
    }

    private string message;

    public void SideEffect()
    {
       message = $"Parameter has changed: {_Value}"; //i want this method executed when value changes from parent
     
    }

    protected override void OnParametersSet()
    {
            if (_Value != Value)
            {
                _Value = Value;
            }
    }
 }
Run Code Online (Sandbox Code Playgroud)

用法

@page "/"

<Child Value="IsChanged" />

<button type="button" @onclick="Update">Update</button>

<div>IsChanged: @IsChanged</div>

@code
{
   private bool IsChanged { get; set; } = true;

   public void Update()
   {
      IsChanged = !IsChanged;
   }
}
Run Code Online (Sandbox Code Playgroud)

  • 组件参数设置器中不应该有任何逻辑。请参阅“组件参数应声明为自动属性,这意味着它们不应在其 get 或 set 访问器中包含自定义逻辑...不要将自定义逻辑放置在 get 或 set 访问器中,因为组件参数纯粹是为了使用作为父组件将信息流向子组件的通道。” 来自 https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#component-parameters-1 (2认同)