英文:
Calling StateHasChanged() on parent component from child component
问题
在我的 Blazor 应用程序中，用于管理案例的页面上，我有一个名为 ClaimedBy 的属性，它位于一个名为 CaseDetails.cs 的类的实例中，该属性存储了已认领案例的管理员的用户名。
在首页上显示如下：
<p>认领人：@caseDetails.ClaimedBy</p>
现在，从一个子组件中，我尝试像这样更新 ClaimedBy 的值：
caseDetails.ClaimedBy = newUser;
但是首页上的名称（父组件）不会自动更新。如果我在首页上创建一个按钮，通过调用 StateHasChanged() 方法，它会正确更新，如下所示：
<button @onclick="UpdatePage">更新页面</button>
@code {
private void UpdatePage()
{
StateHasChanged();
}
}
我尝试从我的子组件中调用 StateHasChanged()，在设置 ClaimedBy 属性的新值的相同方法中，但这并不起作用。StateHasChanged() 必须从父组件中调用。如何让它在设置新值后自动更新？
英文:
In my blazor app for administrating cases, I have a property ClaimedBy on an instance of a class CaseDetails.cs which holds the username of the administrator who has claimed the case.
It is displayed like this on the index page:
<p>Claimed by: @caseDetails.ClaimedBy</p>
Now, from a child component, I'm trying to update the value of ClaimedBy like this:
caseDetails.ClaimedBy = newUser;
But the name on the index page (the parent component), is not updated automatically. It updates correctly if I make a button on the index page with a method that calls StateHasChanged() like this:
<button @onclick="UpdatePage">update page</button>
@code {
private void UpdatePage()
{
StateHasChanged();
}
}
I have tried to call StateHasChanged() from my child component, in the same method which sets the new value of the ClaimedBy property, but that doesn't work. StateHasChanged() has to be called from the parent component. How do I get it to update automatically once the new value has been set?
答案1
得分: 2
我通过EventCallBack实现了您的代码，它正常运行：
父组件：
@page "/parent"
@using CheckStateHasChanged.Class
@inject CaseDetails caseDetails
<h3>父组件</h3>
<p>由@caseDetails.ClaimedBy声明</p>
<Child caseDetailClaimedBy="UpdatePage"></Child>
@code {
string claimedByInParent = string.Empty;
public async Task UpdatePage(string claimedByFromChild)
{
claimedByInParent = claimedByFromChild;
}
}
子组件：
@using CheckStateHasChanged.Class
@inject CaseDetails caseDetails
<h3>子组件</h3>
<button @onclick="() => UpdatePage(caseDetails.ClaimedBy)"></button>
@code {
[Parameter]
public EventCallback<string> caseDetailClaimedBy { get; set; }
public async Task UpdatePage(string claimedBy)
{
caseDetails.ClaimedBy = "test";
await caseDetailClaimedBy.InvokeAsync(claimedBy);
}
}
CaseDetails.cs：
namespace CheckStateHasChanged.Class
{
public class CaseDetails
{
public string ClaimedBy { get; set; } = "admin";
}
}
有关EventCallBack的更多信息，您可以参考组件事件和在Blazor中实现事件回调的5个步骤。
英文:
I implemented your code by EventCallBack and it works correctly:
Parent:
@page "/parent"
@using CheckStateHasChanged.Class
@inject CaseDetails caseDetails
<h3>Parent</h3>
<p>Claimed by: @caseDetails.ClaimedBy</p>
<Child caseDetailClaimedBy="UpdatePage"></Child>
@code {
string claimedByInParent = string.Empty;
public async Task UpdatePage(string claimedByFromChild)
{
claimedByInParent = claimedByFromChild;
}
}
Child:
@using CheckStateHasChanged.Class
@inject CaseDetails caseDetails
<h3>Child</h3>
<button @onclick="(()=>UpdatePage(caseDetails.ClaimedBy))"></button>
@code {
[Parameter]
public EventCallback<string> caseDetailClaimedBy { get; set; }
public async Task UpdatePage(string claimedBy)
{
caseDetails.ClaimedBy = "test";
await caseDetailClaimedBy.InvokeAsync(claimedBy);
}
}
CaseDetails.cs
namespace CheckStateHasChanged.Class
{
public class CaseDetails
{
public string ClaimedBy { get; set; } = "admin";
}
}
For more info about EventCallBack you can refer to Component events and 5-steps-to-implement-event-call-backs-in-blazor
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论