输入文本字段上的Blazor子级到父级双向绑定

如何解决输入文本字段上的Blazor子级到父级双向绑定

我试图找到一种在不调用父组件之类的方法的情况下将值从子组件传递给父组件的方法

<child ValChanged="DoSomethingMethod"/>

并最终找到方法
孩子：

    <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);
                }
            }
        }
    }

父母：

    @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;}
}

这可行，我很高兴，但是当从子组件中删除if(val!=value){}条条件并仅保留set {val=value;ValChanged.InvokeAsync(val);}时 它停止工作，如果我更改输入字段应用程序上的值，将冻结。 那么，谁能解释原因？ 谢谢

解决方法

您遇到一个无限循环，其中，您在文本框中键入的字符（例如“ a”）被分配给val变量，然后触发EventCallback以更新Index组件上的Result属性，然后子组件的重新呈现是在@ bind-Val属性设置为Result属性中包含的值（'a'）的情况下进行的。现在，子组件将使用相同的值（'a'）重新呈现，该值被分配给val变量，这将触发EventCallback更新Index组件上的Result属性，以此类推。等等，无限。

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

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