组件

Question

在我的组件中使用EventCallback时，控件的参数会再次发送/未正确更新。

组件

<button @onclick="@(e => ChangePlaceholder())">Change Placeholder</button>
<button @onclick="@(e => ChangePlaceholderEvent())">Change Placeholder Event</button>
<label>@Placeholder</label>

@code {
    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public EventCallback<string> OnChanged { get; set; }

    private void ChangePlaceholder()
    {
        Placeholder = "hello";
    }

    private void ChangePlaceholderEvent()
    {
        Placeholder = "hello";

        OnSelectedChanged.InvokeAsync(Placeholder);
    }
}

父页面

<Control Placeholder="something" OnChanged=@UpdateSomething />

@code {    
    static void UpdateSomething(string someString)
    {
        Console.WriteLine($"Event went kablam: {someString}");
    }
}

如果要运行 ChangePlaceholder（）函数，则UI将更新并更改'hello'，但是如果您运行 ChangePlaceholderEvent（） 函数，标签返回到'something'，这是首先发送占位符参数的字符串。

这使我相信EventCallback的触发也会使控件的其他参数再次发送。

如何停止再次发送参数？

编辑：我制作了一个webassemby应用程序并测试了相同的代码，并且发生了相同的错误。

Answer 1

事件回调将触发父组件的重新渲染，并且您无条件地传承了“某物” 导致“内容”重新呈现。

这里的问题是您正在使用参数作为状态组件，应该避免。

Reference

您可以通过使用“操作”而不是“ EventCallback”来解决问题：

[Parameter]
public Action<string> OnChanged { get; set; }

@code {
    private void ChangePlaceholderEvent()
    {
        Placeholder = "hello";

        OnChanged(Placeholder);
    }
}

触发/调用EventCallback后，将再次发送参数

组件

父页面

1 个答案: