Blazor 运行子组件更改父组件值时的自定义事件

Question

我有父子组件：

父组件

<IncrementButton Increment="-1" @bind-Attribute="Amount" @onclick="@(() => UpdateBottomPillText())" />
<span>@Amount</span>
<IncrementButton Increment="1" @bind-Attribute="Amount" @onclick="@(() => UpdateBottomPillText())" />
<span>@bottomPillAmount</span>

@code {
    [Parameter] public int Amount { get; set; }
    [Parameter] public EventCallback<int> AmountChanged { get; set; }

    string bottomPillAmount;

    string UpdateBottomPillText()
    {
        double amountAdded = Math.Floor(((double)(Amount - 10.0)) / 2.0);

        bottomPillAmount = amountAdded > 0 ? "+" + amountAdded.ToString() : amountAdded.ToString();

        return Amount.ToString();
    }

    protected override void OnParametersSet()
    {
        UpdateBottomPillText();
    }

}

子组件（IncrementButton）

<button type="button" @onclick="OnAttributeChanged">@displayText</button>

@code {
    [Parameter]
    public int Increment { get; set; } = 1;

    [Parameter]
    public int Attribute { get; set; }

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

    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }

    string displayText;

    protected override void OnParametersSet()
    {
        displayText = Increment > 0 ? "+" + Increment.ToString() : Increment.ToString();
    }

    private Task OnAttributeChanged()
    {
        Attribute += Increment;
        await OnClick.InvokeAsync(new MouseEventArgs());
        return AttributeChanged.InvokeAsync(Attribute);
    }
}

@bind-Attribute="Amount" 工作并在按下 IncrementButton 时更新值，但我想运行 UpdateBottomPillText() 以及更新值。现在我是通过 onclick 事件来做的，但是有没有办法修改父组件中的 AttributeChanged 事件？

Answer 1

这里您需要的是适当地设置组件之间的双向数据绑定。

IncrementButton.razor

<button type="button" @onclick="OnAttributeChanged">@displayText</button>

@code {
[Parameter]
public int Increment { get; set; } = 1;

[Parameter]
public int Attribute { get; set; }

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


string displayText;

protected override void OnParametersSet()
{
    displayText = Increment > 0 ? "+" + Increment.ToString() : 
                                                Increment.ToString();
}

private Task OnAttributeChanged()
{
    Attribute += Increment;
    return AttributeChanged.InvokeAsync(Attribute);
}
}

用法

<IncrementButton Increment="-1" @bind-Attribute="Amount"/>
<span>@Amount</span>
<IncrementButton Increment="1" @bind-Attribute="Amount"/>
<span>@bottomPillAmount</span>

@code {
  private int amount;
  [Parameter] public int Amount
  {
    get => amount;
    set {
        if(amount != value)
        {
            amount = value;
            UpdateBottomPillText();

        }
    }
 }

 string bottomPillAmount;

string UpdateBottomPillText()
{
    double amountAdded = Math.Floor(((double)(Amount - 10.0)) / 2.0);

    bottomPillAmount = amountAdded > 0 ? "+" + amountAdded.ToString() : amountAdded.ToString();

    return Amount.ToString();
}

protected override void OnParametersSet()
{
    UpdateBottomPillText();

}

}

Blazor 运行子组件更改父组件值时的自定义事件

Blazor run custom event when child component changes parent component values

blazor

blazor-server-side

IncrementButton.razor

用法

Blazor 运行 子组件更改父组件值时的自定义事件

Blazor run custom event when child component changes parent component values

blazor

blazor-server-side

IncrementButton.razor

用法

Blazor 运行子组件更改父组件值时的自定义事件