在 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  EventCallback<string>  OnUserNameChanged { get; set; }

此属性将包含对父组件上定义的方法的委托。

在您的子组件中定义一个属性和一个支持变量：

    private string username;

    public string UserName

    {

        get => username;

        set

        {

            username = value;

            // Invoke the delegate passing it the changed value

            OnUserNameChanged?.Invoke(value);

        }

    } 

在您的父组件中定义一个方法，该方法在用户名更改时从子组件调用：

    public async void UserNameChanged(string username)

       {

          // Gets and consume the user name

       }

这就是您的子组件在父组件中的使用方式：请注意，我们将方法名称分配给属性 OnUserNameChanged，这是子组件中的委托属性

     <cinput OnUserNameChanged="UserNameChanged" ></cinput>

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

        <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

{

    public partial class Index

    {

       

        SingleSelect singleSelect;

        string singleSelectResult;

        List<SingleSelectOption> SingleSelectOptions = new List<SingleSelectOption>

        {

            new SingleSelectOption{ Id=1, Value="One"},

            new SingleSelectOption{ Id=2, Value="Two"},

            new SingleSelectOption{ Id=3, Value="Three"},

            new SingleSelectOption{ Id=4, Value="Four"},

            new SingleSelectOption{ Id=5, Value="Five"},

            new SingleSelectOption{ Id=6, Value="Six"},

            new SingleSelectOption{ Id=7, Value="Seven"},

            new SingleSelectOption{ Id=8, Value="Eight"},

            new SingleSelectOption{ Id=9, Value="Nine"},

            new SingleSelectOption{ Id=10, Value="Ten"},

            new SingleSelectOption{ Id=11, Value="Eleven"},

        };

        private void SubmitSingleSelect()

        {

            singleSelectResult = singleSelect.SelectedOption.Value;

        }

    }

}

SingleSelect.razor page

<div class="container">

    <div class="row">

        <div class="col-3">

            <select id="NotSelected" class="border" multiple="multiple" size="@boxSize" style="width: 200px">

                @foreach (var option in Options)

                {

                    <option id="@option.Id" @onclick="@(() => Select(option))">@option.Value</option>

                }

            </select>

        </div>

    </div>

</div>

@code 

{

    [Parameter]

    public List<SingleSelectOption> Options { get; set; } = new List<SingleSelectOption>();

    public SingleSelectOption SelectedOption { get; set; } = new SingleSelectOption { Id = 0, Value = " "};

    private int boxSize = 5;

    private void Select(SingleSelectOption option)

    {

        SelectedOption = option;

    }

    public class SingleSelectOption

    {

        public int Id { get; set; }

        public string Value { get; set; }

    }

}

Answer 3

所以我做了这样的事情

cinput.cshtml

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

@functions{

string username;

string getUsername(){

 return username;

}

}

在 pform.cshtml 中

<cinput ref="_cinput"></cinput>

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

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

@functions{

string email;

Cinput _cinput

public void onsubmit(){

   //get username

   string uname = _cinput.getUsername();

   //Call api

}

}

https://learn.microsoft.com/en-us/aspnet/core/razor-components/components?view=aspnetcore-3.0#capture-references-to-components