如何通过调用 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上触发一个渲染事件，并且按钮文本会得到更新。