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

<TextBox @bind-InputValue="ReturnValue" />

private string ReturnValue {get; set;}

[Parameter]
public string InputValue {get; set;}

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

@使用ComponentPackage.Common
@代码{
[参数]
public EventCallback ValueChanged{get；set；}
私有字符串输入值；
公共字符串输入值
{
get=>inputValue；
设置
{
输入值=值；
ValueChanged.InvokeAsync（值）；
}
}
}

然后在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;
    }
}

@page”/newpage
@使用ComponentPackage.Common



您已输入：@ReturnValue
@代码{
[参数]
公共字符串返回值{get；set；}
私有void TestContent（）
{
//这里我想从组件中获取值
}
public void OnValueChanged（字符串returnValue）
{
ReturnValue=ReturnValue；
}
}

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

---

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

我认为这就是您需要的：组件中的双向数据绑定 下面的代码，完成和工作是你想要的。。。 复制、粘贴并运行

以下示例显示如何在父组件及其子组件之间执行双向数据绑定。在这两个组件中，每个组件都有一个文本框控件。在父组件的文本框中键入文本时，子组件的文本框中的文本将更改以反映父组件中所做的更改，反之亦然

儿童剃须刀

子组件
@代码{
私有字符串文本{get；set；}
[参数]
公共字符串文本
{
获取{返回文本；}
设置
{
如果（文本！=值）{
文本=值；
if（TextChanged.hasdegate）
{
TextChanged.InvokeAsync（值）；
}
}
}
}
[参数]
public EventCallback TextChanged{get；set；}
}

剃须刀

@page”/ParentComponent
父组件

@代码{
[参数]
公共字符串文本{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>

父组件

---

祝你好运。。。如果有什么不清楚的地方，请毫不犹豫地询问……

我想这就是您需要的：组件中的双向数据绑定 下面的代码，完成和工作是你想要的。。。 复制、粘贴并运行

以下示例显示如何在父组件及其子组件之间执行双向数据绑定。在这两个组件中，每个组件都有一个文本框控件。在父组件的文本框中键入文本时，子组件的文本框中的文本将更改以反映父组件中所做的更改，反之亦然

儿童剃须刀

子组件
@代码{
私有字符串文本{get；set；}
[参数]
公共字符串文本
{
获取{返回文本；}
设置
{
如果（文本！=值）{
文本=值；
if（TextChanged.hasdegate）
{
TextChanged.InvokeAsync（值）；
}
}
}
}
[参数]
public EventCallback TextChanged{get；set；}
}

剃须刀

@page”/ParentComponent
父组件

@代码{
[参数]
公共字符串文本{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>

父组件

---

祝你好运。。。如果有什么不清楚的地方，请毫不犹豫地询问……

这是我的解决方案，希望能有所帮助

我将StateDropdown作为子组件

@inject HttpClient httpClient

@if (States != null)
{
<select id="SearchStateId" name="stateId" @onchange="@StateChange" class="form-control1">
    <option>@InitialText</option>
    @foreach (var state in States)
    {
        <option value="@state.Name">@state.Name</option>
    }
</select>
}

@code {
[Parameter] public string SelectedText { get; set; } = string.Empty;
[Parameter] public string InitialText { get; set; } = "Select State";
[Parameter] public EventCallback<string> SelectedTextChanged { get; set; }
private KeyValue[] States;
protected override async Task OnInitializedAsync()
{
    States = await httpClient.GetJsonAsync<KeyValue[]>("/sample-data/State.json");
}

private async Task StateChange(ChangeEventArgs e)
{
    //Console.WriteLine("It is definitely: " + e.Value.ToString());
    await SelectedTextChanged.InvokeAsync(e.Value.ToString());
}

public class KeyValue
{
    public int Id { get; set; }

    public string Name { get; set; }
}
}

@inject-HttpClient-HttpClient
@如果（状态！=null）
{
@首字母文本
@foreach（状态中的var状态）
{
@州名
}
}
@代码{
[参数]公共字符串SelectedText{get；set；}=string.Empty；
[参数]公共字符串InitialText{get；set；}=“选择状态”；
[参数]公共事件回调SelectedTextChanged{get；set；}
私有密钥值[]状态；
受保护的重写异步任务OnInitializedAsync（）
{
States=wait httpClient.GetJsonAsync（“/sample data/State.json”）；
}
专用异步任务状态更改（ChangeEventArgs e）
{
//WriteLine（“它肯定是：+e.Value.ToString（））；
等待SelectedTextChanged.InvokeAsync（e.Value.ToString（））；
}
公共类键值
{
公共int Id{get；set；}
公共字符串名称{get；set；}
}
}

然后在我的页面中，我添加了状态下拉列表

<StateDropdown @bind-SelectedText="@searchFilter.State" InitialText="All India"></StateDropdown>
<input type="button" id="btnSearch" class="btn-default form-control1" @onclick="@SearchAdertisements" value="Search" />


@code {
 private SearchFilter searchFilter = new SearchFilter();
 public class SearchFilter
{
    public string State { get; set; } = string.Empty;

    public string Category { get; set; } = string.Empty;
}

private async Task SearchAdertisements()
{
    Console.WriteLine(searchFilter.State);
}

@代码{
private SearchFilter SearchFilter=new SearchFilter（）；
公共类搜索过滤器
{
公共字符串状态{get；set；}=string.Empty；
公共字符串类别{get；set；}=string.Empty；
}
专用异步任务searchaderistrations（）
{
Console.WriteLine（searchFilter.State）；
}

---

您可以查看更多详细信息。

这是我的解决方案，希望对您有所帮助

我将StateDropdown作为子组件

@inject HttpClient httpClient

@if (States != null)
{
<select id="SearchStateId" name="stateId" @onchange="@StateChange" class="form-control1">
    <option>@InitialText</option>
    @foreach (var state in States)
    {
        <option value="@state.Name">@state.Name</option>
    }
</select>
}

@code {
[Parameter] public string SelectedText { get; set; } = string.Empty;
[Parameter] public string InitialText { get; set; } = "Select State";
[Parameter] public EventCallback<string> SelectedTextChanged { get; set; }
private KeyValue[] States;
protected override async Task OnInitializedAsync()
{
    States = await httpClient.GetJsonAsync<KeyValue[]>("/sample-data/State.json");
}

private async Task StateChange(ChangeEventArgs e)
{
    //Console.WriteLine("It is definitely: " + e.Value.ToString());
    await SelectedTextChanged.InvokeAsync(e.Value.ToString());
}

public class KeyValue
{
    public int Id { get; set; }

    public string Name { get; set; }
}
}

@inject-HttpClient-HttpClient
@如果（状态！=null）
{
@首字母文本
@foreach（状态中的var状态）
{
@州名
}
}
@代码{
[参数]公共字符串SelectedText{get；set；}=string.Empty；
[参数]公共字符串InitialText{get；set；}=“选择状态”；
[参数]公共事件回调SelectedTextChanged{get；set；}
脉波重复间隔