在 Blazor 的父组件中获取子组件绑定值

Question

让我们说名为 cinput.cshtml 的子组件是

<input type="text" bind="@username">

@functions{

string username;

}

父组件称为 pform.cshtml

<cinput></cinput>

<input type="text" bind="@email">

<input type="button" onclick="@onsubmit">

@functions{

string email;

public void onsubmit(){

   //Call api

}

}

所以问题是如何在父组件中获取用户名值？

Answer 1

您应该执行以下操作：在您的子组件中定义一个 EventCallback 委托属性：[Parameter] protected&nbsp; EventCallback<string>&nbsp; OnUserNameChanged { get; set; }此属性将包含对父组件上定义的方法的委托。在您的子组件中定义一个属性和一个支持变量：&nbsp; &nbsp; private string username;&nbsp; &nbsp; public string UserName&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; get => username;&nbsp; &nbsp; &nbsp; &nbsp; set&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; username = value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Invoke the delegate passing it the changed value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnUserNameChanged?.Invoke(value);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;在您的父组件中定义一个方法，该方法在用户名更改时从子组件调用：&nbsp; &nbsp; public async void UserNameChanged(string username)&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Gets and consume the user name&nbsp; &nbsp; &nbsp; &nbsp;}这就是您的子组件在父组件中的使用方式：请注意，我们将方法名称分配给属性 OnUserNameChanged，这是子组件中的委托属性&nbsp; &nbsp; &nbsp;<cinput OnUserNameChanged="UserNameChanged" ></cinput>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" bind="@email">&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onclick="@onsubmit">希望这可以帮助...这就是 Steve Anderson 对 ref 的评价：用例预期用例是允许父组件向子组件发出命令，例如“显示”或“重置”。即便如此，从架构上讲，这也是一种妥协，因为如果您的子组件是无状态的（即，除了它们的参数之外，不作用于任何状态），它仍然会更干净，在这种情况下，从理论上讲它甚至不可能发布除了改变他们孩子的参数之外的“行动”，在这种情况下你根本不需要 ref 。强烈不建议您使用 ref 作为改变子组件状态的方法。相反，始终使用普通的声明性参数将数据传递给子组件。这将导致子组件在正确的时间自动重新渲染。我们正在努力改变组件参数的表示方式，以便默认情况下它们被封装并且不可能从外部读取/写入。

Answer 2

开拓者方式：要做到这一点，他们打算在 Blazor 中完成，首先使用 Blazor 组件。下面的示例使用组件 SingleSelect.razor，它是一个简化的 HTML Select 元素。该组件由 VisualStudio 根据 razor 组件文件的名称自动生成的标签引用，因此在这种情况下标签将为<SingleSelect>.为了从子组件获取值，父组件创建了一个指向子组件的引用变量。这是通过在父级中创建子级的局部变量来完成的：private SingleSelect singleSelect;然后将其链接到子标签中：<SingleSelect @ref="singleSelect" Options="SingleSelectOptions"></SingleSelect>这允许通过使用引用变量来引用子数据：singleSelect.SelectedOption.Value以下几页给出了一个完整的例子。Index.razor page@page "/"<h3>Single Select Example</h3><h5 class="mt-2">Make your selection</h5><SingleSelect @ref="singleSelect" Options="SingleSelectOptions"></SingleSelect><button class="btn btn-primary mt-2" @onclick="SubmitSingleSelect">Submit</button><h5 class="mt-2">The following was selected:</h5><p>@singleSelectResult</p>@code{&nbsp; &nbsp; public partial class Index&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; SingleSelect singleSelect;&nbsp; &nbsp; &nbsp; &nbsp; string singleSelectResult;&nbsp; &nbsp; &nbsp; &nbsp; List<SingleSelectOption> SingleSelectOptions = new List<SingleSelectOption>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=1, Value="One"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=2, Value="Two"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=3, Value="Three"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=4, Value="Four"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=5, Value="Five"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=6, Value="Six"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=7, Value="Seven"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=8, Value="Eight"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=9, Value="Nine"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=10, Value="Ten"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new SingleSelectOption{ Id=11, Value="Eleven"},&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; private void SubmitSingleSelect()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; singleSelectResult = singleSelect.SelectedOption.Value;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}SingleSelect.razor page<div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="NotSelected" class="border" multiple="multiple" size="@boxSize" style="width: 200px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @foreach (var option in Options)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option id="@option.Id" @onclick="@(() => Select(option))">@option.Value</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>@code&nbsp;{&nbsp; &nbsp; [Parameter]&nbsp; &nbsp; public List<SingleSelectOption> Options { get; set; } = new List<SingleSelectOption>();&nbsp; &nbsp; public SingleSelectOption SelectedOption { get; set; } = new SingleSelectOption { Id = 0, Value = " "};&nbsp; &nbsp; private int boxSize = 5;&nbsp; &nbsp; private void Select(SingleSelectOption option)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; SelectedOption = option;&nbsp; &nbsp; }&nbsp; &nbsp; public class SingleSelectOption&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; public int Id { get; set; }&nbsp; &nbsp; &nbsp; &nbsp; public string Value { get; set; }&nbsp; &nbsp; }}

Answer 3

所以我做了这样的事情cinput.cshtml<input type="text" bind="@username">@functions{string username;string getUsername(){&nbsp;return username;}}在 pform.cshtml 中<cinput ref="_cinput"></cinput><input type="text" bind="@email"><input type="button" onclick="@onsubmit">@functions{string email;Cinput _cinputpublic void onsubmit(){&nbsp; &nbsp;//get username&nbsp; &nbsp;string uname = _cinput.getUsername();&nbsp; &nbsp;//Call api}}https://learn.microsoft.com/en-us/aspnet/core/razor-components/components?view=aspnetcore-3.0#capture-references-to-components