Blazor 组件需要修改父组件的值

Question

我的 Blazor 应用中有这两个组件：

Component1.razor：

<CascadingValue Value=this>
    <Component2/>
</CascadingValue>

<p>@DisplayedText</p>

@code {
    public string DisplayedText = string.Empty;
}

Component2.razor：

<button @onclick=@(e => { C1.DisplayedText = "testing"; })>Set DisplayedText</button>

@code {
    [CascadingParameter]
    public Component1 C1 { get; set; }
}

当我单击“设置 DisplayedText”按钮时，Component1 中的 p 元素中的文本应更改为 testing，但事实并非如此。我该如何解决这个问题？

Answer 1

@Merlin04，这是对级联值功能的滥用和误用。通常，父组件通过组件参数与其子组件进行通信。

您不能从后代更新级联值。

错了……

下面的代码 sn-p 演示了一个更好的解决方案，基于你所做的，虽然它不是最优的，因为你的代码和我的代码也是从方法更新属性，事实上，我们应该改变属性的直接取值，而不是通过中介代码（即方法）

Component2.razor

<button @onclick="@(() => SetDisplayedText.InvokeAsync("testing"))">Set 
                                                 DisplayedText</button>

@code {
   [Parameter]
   public EventCallback<string> SetDisplayedText { get; set; }
}

Component1.razor

<Component2 SetDisplayedText="@SetDisplayedText"/>

<p>@DisplayedText</p>

@code {
    private string DisplayedText = string.Empty;

    public void SetDisplayedText(string newText)
   {
       DisplayedText = newText;
   }
}

请注意，不需要调用 StateHasChanged 方法，因为这是您在使用 EventCallback 'delegate' 时获得的好处

希望这会有所帮助...

Answer 2

Merlin04，下面的代码 sn -p 演示了如何做到这一点。请注意，这实际上是一个非常简单的示例，但它显示了当需要在远程组件之间进行通信时应该如何编码。

这是代码，复制并运行它，如果您有更多问题，请随时提问。

MessageService.cs

 public class MessageService
{
    private string message;
    public string Message
    {
        get => message;
        set
        {
            if (message != value)
            {
                message = value;
                if (Notify != null)
                {
                     Notify?.Invoke();
                }

            }
        }
    }

    public event Action Notify;
}

注意：服务是一个普通的类...它为其他对象提供服务，应该在 Startup.ConfigureServices 方法中将它添加到 DI 容器中，以使其可供请求的客户端使用。在 ConfigureServices 方法中添加：

 services.AddScoped<MessageService>();

注意：如您所见，我定义了一个 Action 类型的事件委托，当用户在 Component3 中的文本框中键入文本时，它会从属性的 set 访问器调用。触发此委托会导致 Components3 输入的文本显示在 Index 组件中，该组件是 Component2 的父级（参见下面的代码）。

Index.razor

@page "/"

@inject MessageService MessageService
@implements IDisposable

<p>I'm the parent of Component2. I've got a message from my grand child: 
                                            @MessageService.Message</p>

<Component2 />

@code {
protected override void OnInitialized()
{
    MessageService.Notify += OnNotify;
}

public void OnNotify()
{
    InvokeAsync(() =>
    {
        StateHasChanged();
    });
 }

 public void Dispose()
 {
    MessageService.Notify -= OnNotify;
 }
}

注意我们直接绑定MessageService.Message属性，但是必须调用StateHasChanged方法来刷新文本的显示。

Component2.razor

<h3>Component2: I'm the parent of component three</h3>
<Component3/>

@code {

}

Component3.razor

@inject MessageService MessageService

<p>This is component3. Please type a message to my grand parent</p>
<input placeholder="Type a message to grandpa..." type="text" 
@bind="@MessageService.Message" @bind:event="oninput" />

请注意，在 Component3 中，我们将 MessageService.Message 绑定到一个文本框，并且每次按下键盘时都会发生绑定（输入事件与更改 事件）。

仅此而已，希望对您有所帮助，请随时提出任何问题。

Answer 3

查看 enet 的答案而不是这个

您不能从后代更新级联值。

相反，在父级（Component1）中创建一个方法来设置值：

public void SetDisplayedText(string newText) {
    DisplayedText = newText;
    StateHasChanged();
}

然后，您可以在后代中调用它：

<button @onclick=@(e => { C1.SetDisplayedText("testing"); })>Set DisplayedText</button>