Blazor child 到 parent two-way 绑定到 input-text 字段

Question

我试图找到一种方法将值从 child 组件传递到 parent 而无需调用 parent 组件中的方法，例如

<child ValChanged="DoSomethingMethod"/>

并最终找到如何做到这一点
child:

    <div class="form-group">
    <label>@Label</label>
    <input class="form-control" @bind="@Val" @bind:event="oninput" />
</div>

    @code{
        [Parameter]
        public string Label { get; set; }
        [Parameter]
        public EventCallback<string> ValChanged { get; set; }
        private string val;
        [Parameter]
        public string Val
        {
            get => val;
            set
            {
                if (val!=value)
                {
                    val = value;
                    ValChanged.InvokeAsync(val);
                }
            }
        }
    }

parent:

    @page "/"
<div class="row">
    <div class="col">
        <Inp Label="@Label" @bind-Val="@Result"></Inp>
    </div>
    <div class="col">
        <Res Description="@Label" Val="@Result"></Res>
    </div>
</div>



      @code{
    public string Label {get;set;}="Simple input";
    public string Result {get;set;}
}

这有效，我很高兴，但是当从 child 组件中删除 if(val!=value){} 条件并只留下 set {val=value;ValChanged.InvokeAsync(val);} 它停止工作，如果我更改输入字段应用程序上的值，它就会冻结。那么，任何人都可以解释原因吗？谢谢

Answer 1

你有一个无限循环，其中你在文本框中键入的字符 'a' 被分配给 val 变量，之后你触发 EventCallback 来更新结果属性在 Index 组件上，然后子组件的 re-rendering 发生，@bind-Val 属性设置为结果属性中包含的值 ('a')。现在子组件是 re-render 具有相同的值（'a'），它被分配给 val 变量，这会触发 EventCallback 更新 Index 组件上的 Result 属性，.. ..... 等等等等，无穷无尽。

您可以运行在调试模式下查看您的应用...

这就是为什么您应该始终检查 val 的值是否不同于 value 变量的值

Blazor child 到 parent two-way 绑定到 input-text 字段

Blazor child to parent two-way binding on input-text field

input-field

two-way-binding

blazor