Blazor在输入文本字段上进行父子双向绑定

Question

我试图找到一种方法，将值从子组件传递到父组件，而不需要调用父组件中的方法，如

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

父级：

@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);}时它停止工作，如果我在输入字段应用程序上更改值，它就会冻结。那么，有人能解释一下原因吗？谢谢

Answer 1

您有一个无限循环，其中您在文本框中键入的字符(如"a"(被分配给val变量，之后您触发EventCallback以更新Index组件上的Result属性，然后重新呈现子组件，并将@bind-val属性设置为Result属性中包含的值('a'(。现在，子组件被重新呈现为具有相同值('a'(，该值被分配给val变量，该变量触发EventCallback以更新Index组件上的Result属性。。。。。。。等等，无限地。

你可以在调试模式下运行你的应用程序来查看。。。

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