如何通过调用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

部分原因是您的架构设计：按钮组件不应该管理编辑状态，它应该只显示它。

@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;   
    }

}