如何通過調用 Blazor 中的另一個組件方法來更改按鈕文本

Question

我有一個自定義按鈕組件，如下所示。

<button class="btn btn-outline-primary" @onclick="OnClick"> @ButtonText</button>

@code {

    [Parameter]
    public string ButtonText { get; set; } = "Edit";

    public virtual void OnClick()
    {
        ButtonText = ButtonText == "Edit" ? "Editing..." : "Edit";
    }
}

當我單擊按鈕時，一切都正常工作，並且按鈕文本正在發生變化。 但是當我單擊另一個按鈕時，我想更改按鈕的文本。為此，我調用按鈕的 onclick 方法。 但是當我單擊按鈕時，即使調用了該方法，文本也不會改變。 這是我的頁面。

@page "/test"

<EditButton @ref="EditButton"></EditButton>

<button class="btn-primary" @onclick="ChangeButtonText">Change Button Text</button>

@code {

    EditButton EditButton;

    void ChangeButtonText()
    {
        EditButton.OnClick();
    }
}

Answer 1

這部分是由於您的架構設計：ButtonComponent 不應該管理編輯狀態，它應該只是顯示它。

@page "/test"

<EditButton IsEditing="isEditing" Click="EditClick"></EditButton>

<button class="btn-primary" @onclick="ChangeButtonText">Change Button Text</button>

@code {

    //EditButton EditButton;
    bool isEditing = false;

    void ChangeButtonText()
    {
        isEditing = false;  // or !isEditing
    }

    void EditClick()
    {
       isEditing = ! isEditing;   
    }

}

Answer 2

您的代碼不能正常工作，因為它缺少對StateHasChanged方法的調用：

編輯按鈕.razor

<button class="btn btn-outline-primary" @onclick="OnClick"> @ButtonText</button>

@code {

    [Parameter]
    public string ButtonText { get; set; } = "Edit";

    public void OnClick()
    {
        ButtonText = ButtonText == "Edit" ? "Editing..." : "Edit";

        InvokeAsync(() => StateHasChanged());
    }
} 

請注意，我添加了對 StateHasChanged 方法的調用，以便在組件的 state 發生更改后重新渲染組件。

InvokeAsync(() => StateHasChanged());

索引.razor

@page "/"

<EditButton @ref="EditButton"></EditButton>

<button class="btn-primary" @onclick="ChangeButtonText">Change Button Text</button>

@code {

    EditButton EditButton;

    void ChangeButtonText()
    {
        EditButton.OnClick();
    }
}

總結一下：你做的很好，但是你必須手動調用 StateHasChaged 方法。 它不是由框架自動調用的。 請注意，沒有必要從處理 UI 事件（例如“單擊”事件）的事件處理程序中添加對 StateHasChaged 方法的調用。 但在您的情況下，這是必要的，因為 EditButton.OnClick 事件處理程序不是 UI 事件處理程序。 這是您的代碼的only問題。

重要提示：您不應修改或更改組件參數屬性的 state。 應該避免這種情況：

[Parameter]
public string ButtonText { get; set; } = "Edit";

還有這個：

ButtonText = ButtonText == "Edit" ? "Editing..." : "Edit";

組件參數屬性應該是自動屬性：

[Parameter]
public string ButtonText { get; set; } 

並且它們絕不能在組件之外進行修改。 閱讀此閱讀此。 相反，您應該定義從組件參數屬性的值分配的局部變量或屬性，您可以在其上應用您想要的任何操作。

不遵守該規則可能會導致大型組件產生不利的副作用，只有 Steve Sanderson 可以辨別。

Answer 3

這個簡單的解決方案怎么樣。 EditButton保持不變。

@page "/"

<EditButton ButtonText="@this.editButtonText" ></EditButton>

<button class="btn btn-primary ml-3" @onclick="ChangeButtonText">Change Button Text</button>

@code {
    string editButtonText = "Edit";

    void ChangeButtonText()
    {
        editButtonText = editButtonText.Equals("Edit")
        ? "Editing"
        : "Edit";
    }
}

您不需要連接回調和引用。 當您更改組件上ButtonText的值並觸發父組件上的 Blazor 組件事件處理程序 - ChangeButtonText - 時，渲染器會檢測到對ButtonText的更改並通過調用SetParametersSetAsync通知EditButton 。 這會在EditButton上觸發一個渲染事件，並且按鈕文本會得到更新。