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

Question

我是 Blazor 的新手。我已经隐藏了具有特定值绑定发送到父组件的输入。我继续使用this tutorial

子组件是（名称是 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);
    }
}

父组件是：

@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) 输入填充。 完全我想从孩子提供文本并发送给父母，但我不显示文本（为此，我使用了隐藏输入），然后通过 CascadingValue 参数发送到所有组件，但不工作且没有错误，我不知道为什么。

Answer 1

只需用 CSS 隐藏它。

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

我使用 CSS 的方式非常简单：

CSS 类

.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 ）获取值的原因。

要查看其余代码是否正常运行，请将“隐藏”更改为“文本”，然后在文本框中键入。这会触发输入事件，整个过程都会进行。

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

希望这会有所帮助...