时间戳

首页 > 解决方案 > 读取子组件值的最佳实践

c# - 读取子组件值的最佳实践

问题描述

我创建了一个 Razor 组件，一个简单的输入类型，如下所示：

@using ComponentPackage.Common

<input type="text" @bind="InputValue" />

@code {
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private string inputValue;
    public string InputValue
    {
        get => inputValue;
        set
        {
            inputValue = value;
            ValueChanged.InvokeAsync(value);
        }
    }
}

然后我在 Razor 页面上设置这样的子组件：

@page "/newpage"
@using ComponentPackage.Common

<ComponentPackage.Components.TextBox ValueChanged="OnValueChanged"></ComponentPackage.Components.TextBox>
<input type="button" @onclick="TestContent" value="Test" />
<br /><br />
You have entered : @ReturnValue

@code {
    [Parameter]
    public string ReturnValue { get; set; }

    private void TestContent()
    {
        // Here I want to get the value from the component
    }

    public void OnValueChanged(string returnValue)
    {
        ReturnValue = returnValue;
    }
}

从页面中，我将组件事件连接到 OnValueChanged。这有效，只要我离开该字段，ReturnValue 属性就会更新。

所以问题是：当我点击页面上的按钮时，如何读取文本框中的值？换句话说，我不希望在离开文本框时设置 ReturnValue。我曾尝试将 bind-InputValue 用于页面上的属性，但它始终为空。

标签： c#razorblazor

解决方案

我认为这就是您所需要的：组件中的双向数据绑定 以下代码，完整且有效的是您想要的...复制，粘贴并运行...

以下示例展示了如何在父组件与其子组件之间执行双向数据绑定。在这两个组件中的每一个都是一个文本框控件。当您在父组件的文本框中键入文本时，子组件文本框中的文本会更改以反映父组件中所做的更改，反之亦然...

ChildComponent.razor

    <div style="border:solid 1px red">
        <h2>Child Component</h2>
        <input type="text" @bind="Text" @bind:event="oninput" />
    </div>

@code {
    private string text { get; set; }

    [Parameter]
    public string Text
    {
        get { return text; }
        set
        {
            if (text != value) {
                text = value;
                if (TextChanged.HasDelegate)
                {
                    TextChanged.InvokeAsync(value);
                }
            }
        }
    }

    [Parameter]
    public EventCallback<string> TextChanged { get; set; }
}

父组件.razor

@page "/ParentComponent"

<h1>Parent Component</h1>

<input type="text" @bind="Text" @bind:event="oninput" />
<p></p>

<ChildComponent @bind-Text="Text" />


@code {
    [Parameter]
    public string Text { get; set; } = "Hello Blazor";
}

将此内容添加到 Shared/NavMenu.razor，并测试代码：

<li class="nav-item px-3">
            <NavLink class="nav-link" href="ParentComponent">
                <span class="oi oi-plus" aria-hidden="true"></span> ParentComponent
            </NavLink>
        </li>

祝你好运...如果有不清楚的地方，请随时问...

推荐阅读