我有一个自定义按钮组件,如下所示。
<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();
}
}
部分原因是您的架构设计:按钮组件不应该管理编辑状态,它应该只显示它。
@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;
}
}