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

@标签
@代码{
[参数]
公共字符串标签{get；set；}
[参数]
public EventCallback ValChanged{get；set；}
私有字符串val；
[参数]
公共字符串Val
{
get=>val；
设置
{
如果（val！=值）
{
val=值；
ValChanged.InvokeAsync（val）；
}
}
}
}

家长：

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

@page/“
@代码{
公共字符串标签{get；set；}=“简单输入”；
公共字符串结果{get；set；}
}

这是可行的，我很高兴，但是当从子组件中删除

if（val！=value）{}

条件并只留下

set{val=value；ValChanged.InvokeAsync（val）；}

它停止工作，如果我更改输入字段的值，应用程序就会冻结。 那么，有人能解释一下原因吗？

---

谢谢

您有一个无限循环，在这个循环中，您在文本框中键入的字符（如“a”）被分配给val变量，然后触发EventCallback以更新Index组件的Result属性，然后在@bind val属性设置为值（'a'）的情况下重新呈现子组件包含在结果属性中。现在，子组件将使用分配给val变量的相同值（'a'）重新呈现，该值将触发EventCallback以更新索引组件上的Result属性。。。。。。。等等等等，无限地

您可以在调试模式下运行应用程序以查看此

---

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

值

变量的值

我想实例化您的子组件，对吗？这是什么：是的，

是子组件，

只是一个用于显示我在字段中输入的结果的组件，这个组件对我的问题不重要。如果它解决了您的问题，您是否介意将其标记为答案，以便其他人知道它是有用的。是的，绝对正确