如何将隐藏的输入值绑定到 blazor dotnetcore 3.1 中的 parent 组件

Question

我是 blazor 的新手。我已将具有特定值的隐藏输入绑定发送到 parent 组件。我继续 this tutorial

Child 组件是（名称是 MyControl）：

  <div>
        @foreach (var result in this.Results)
        {
            if (result.IsFinal)
            {

                        @(Text= result.Items[0].Transcript)
            <input type="hidden" @oninput="OnTextChanged" value="Text" />
            }
            else
            {
                <img class="embed-responsive" style="height: 50px; width: auto;" src="https://gifdownload.net/wp-content/uploads/2019/01/blue-loader-gif-3.gif"/>

            }
        }
    </div>
@code
{
    [Parameter]
    public string Text { get; set; }
    [Parameter]
    public EventCallback<string> TextChanged { get; set; }

    private Task OnTextChanged(ChangeEventArgs e)
    {
        Text = e.Value.ToString();
        return TextChanged.InvokeAsync(Text);
    }
}

和Parent的分量是：

@inherits LayoutComponentBase

<div class="sidebar">
    <MyControl @bind-Text="text" />
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        <CascadingValue Value="text">
            @Body
        </CascadingValue>

    </div>
</div>
@code{

    private string text;

}

以及在索引组件中的用法示例：

@page "/"



@if (text != null)
{
    <p>
        @text
    </p>
}



@code
{
    [CascadingParameter]
    public string text { get; set; }
}

注意：我不使用键盘来输入文本。来自 @(Text= result.Items[0].Transcript) 的输入填充。完全我想从 child 提供文本并发送到 parent 但我不显示文本（为此目的，我使用了隐藏输入），然后通过 CascadingValue 参数发送到所有组件, 但没有工作，也没有错误，我不知道为什么。

Answer 1

用CSS隐藏即可。

我在我的开源项目 BlazorChat 中做了同样的事情。

我的方法很简单 CSS:

CSS Class

.className
{
    position: fixed;        
    left: -200px;
    top: -200px;
}

根据对象的大小进行调整

这是一个工作示例：

代码 https://github.com/DataJuggler/BlazorChat

如果您想访问，甚至可以访问实时站点：

https://blazorchat.com

Answer 2

此代码：<input type="hidden" @oninput="OnTextChanged" value="Text" /> 导致从变量 (Text 属性) 到控件的一种数据绑定方式，但不是另一种方式，因为没有执行输入 UI，也没有触发输入事件来反映这一点。这就是为什么永远不会调用 OnTextChanged 处理程序并且永远不会调用 TextChanged 'delegate' 的原因，因此父组件永远不会从子组件（ MyControl ）获取值。

要查看其余代码是否正常运行，请将 'hidden' 更改为 'text'，然后在文本框中键入。这样就会触发输入事件，整个过程就可以了。

我不知道你想做什么，但你应该寻找一个没有隐藏输入的解决方案，它无法获得任何输入，因此无法触发事件等

希望这对您有所帮助...

如何将隐藏的输入值绑定到 blazor dotnetcore 3.1 中的 parent 组件

How can bind hidden input value to parent component in blazor dotnetcore 3.1

asp.net-core

blazor

blazor-client-side