Question

我是新来的。我已将具有特定值的隐藏输入绑定发送到父组件。我继续进行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" /> 结果以一种方式将数据从变量（文本属性）绑定到控件，而不会以另一种方式绑定，因为没有执行输入UI，也没有触发输入事件来反映此情况。这就是为什么永远不会调用OnTextChanged处理程序并且永远不会调用TextChanged'delegate'的原因，因此父组件永远不会从子组件（MyControl）获取值。

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

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

希望这对您有帮助...

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

2 个答案: