提问者:小点点

如何通过调用Blazor中的另一个组件方法来更改按钮文本


我有一个自定义按钮组件,如下所示。

<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();
    }
}

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

}