C# Blazor-将参数传递给父级

如何在子组件中的onClick事件时将多个参数从子组件传递到父组件

儿童剃须刀

@foreach( var item in items)
{
  @foreach( var score in item.scores)
  {
    <span @onclick="ItemClicked(item.name, score.id)"> 
      @item.name 
    </span>
  }
}

@foreach（项目中的变量项目）
{
@foreach（项目分数中的var分数）
{
@item.name
}
}

母剃刀

<Child ItemClicked = "@ItemClicked"/>

@code{
 private void ItemClicked(string name, int id)
    {
        Console.WriteLine(name);
        Console.WriteLine(id);
    }
}

@代码{
私有void ItemClicked（字符串名称，int-id）
{
Console.WriteLine（名称）；
控制台写入线（id）；
}
}

我假设“ItemClicked”是EventCallback参数。 如果是这样，您可以创建一个对象，如

Class Student
{
   public int Id { get; set; }
   public string Name { get; set; }
} 

然后你可以用like

母公司

<Checkbox Id="@Id" Checked="@Item.Checked" CheckChanged="OnCheck" />

孩子

@item.name

您需要将其分配给只接收一个参数的eventcallback，以便创建字典或创建类并将其传递到对象中

将整个项传递给父组件，然后可以从这里获取id

@foreach (var item in items)
{
    @foreach (var score in item.scores)
    {
        <span @onclick="OnItemClick.InvokeAsync(item)">
            @item.name
        </span>
    }
}

@code {
    [Parameter] public EventCallback<_TYPE_OF_YOUR_ITEM> OnItemClick { get; set; }
}

@foreach（项目中的变量项目）
{
@foreach（项目分数中的var分数）
{
@item.name
}
}
@代码{
[参数]公共事件回调函数单击{get；set；}
}

@代码{
私有无效HandleItemClick（\u类型\u您的\u项目）
{
//在这里处理您的事件
}
}

用字典

@foreach (var item in items)
{
    @foreach (var score in item.scores)
    {
        <span @onclick="HandleClick(item, score.id)">
            @item.name
        </span>
    }
}

@code {
    [Parameter] public EventCallback<Dictionary<string, dynamic>> OnItemClick { get; set; }

    private void HandleClick(dynamic item, int score)
    {
        var parameter = new Dictionary<string, dynamic>();
        parameter.Add("Item", item);
        parameter.Add("ScoreId", score);

        OnItemClick.InvokeAsync(parameter);
}
}

@foreach（项目中的变量项目）
{
@foreach（项目分数中的var分数）
{
@item.name
}
}
@代码{
[参数]公共事件回调函数单击{get；set；}
私有无效HandleClick（动态项，整数分数）
{
var参数=新字典（）；
参数。添加（“项目”，项目）；
添加参数（“ScoreId”，分数）；
OnItemClick.InvokeAsync（参数）；
}
}

private void HandleItemClick（字典参数）
{
//提取参数并处理
//参数[“ScoreId”]、参数[“项”]
}

根据Microsoft文档，您可能想改为进行绑定？ 以下是链接：

搜索“具有链式绑定的子级到父级绑定”

子组件
@代码{
私有bool-showPassword；
[参数]
公共字符串密码{get；set；}
[参数]
public EventCallback密码已更改{get；set；}
密码更改的专用任务（ChangeEventArgs e）
{
Password=e.Value.ToString（）；
返回PasswordChanged.InvokeAsync（密码）；
}
}

家长：

<h1>Parent Component</h1>

<PasswordField @bind-Password="password" />

@code {
    private string password;
}

<ChildComponent Title="Panel Title from Parent"
            OnClickCallback="@ShowMessage">
    Content of the child component is supplied
    by the parent component.
</ChildComponent>

@code{

    private void ShowMessage(MouseEventArgs e)
    {
        messageText = $"Blaze a new trail with Blazor! ({e.ScreenX}, {e.ScreenY})";
    }

}

父组件
@代码{
私有字符串密码；
}

另一个答案：因为你改变了你的提问

可能是事件处理：

阅读本节：EventCallback并思考EventCallback

儿童： 触发父组件方法

[参数]
public EventCallback OnClickCallback{get；set；}

家长：

<h1>Parent Component</h1>

<PasswordField @bind-Password="password" />

@code {
    private string password;
}

<ChildComponent Title="Panel Title from Parent"
            OnClickCallback="@ShowMessage">
    Content of the child component is supplied
    by the parent component.
</ChildComponent>

@code{

    private void ShowMessage(MouseEventArgs e)
    {
        messageText = $"Blaze a new trail with Blazor! ({e.ScreenX}, {e.ScreenY})";
    }

}

提供子组件的内容
由父组件创建。
@代码{
专用void ShowMessage（MouseEventArgs e）
{
messageText=$“用Blazor开辟新的道路！（{e.ScreenX}，{e.ScreenY}）”；
}
}

在Child中可能需要@on{EVENT}:preventDefault

<span @onclick = "() => ItemClicked(item.name, score.id)"> @item.name</span>

@code 
{
   [Parameter] public Action<string,int> ItemClicked { get; set; }
}

@item.name
@代码
{
[参数]公共操作项{get；set；}
}

您所能做的就是为试图传递回父参数的参数创建一个新类。在本例中，我使用了一个传递Id和Checked属性的通用复选框组件，因为我需要知道我在父组件中选择的项目以及它是否被选中。因此，事件需要知道Id以及是否已检查。子组件包含自己的逻辑，然后向上传递一个新对象，该对象具有父组件现在可以使用的指定值

母公司

<Checkbox Id="@Id" Checked="@Item.Checked" CheckChanged="OnCheck" />

孩子

public分部类复选框：ComponentBase
{
[参数]
公共长Id{get；set；}
[参数]
公共布尔检查{get；set；}
[参数]
public EventCallback CheckChanged{get；set；}
检查更改时受保护的异步任务（布尔检查）
{
//做事
wait CheckChanged.InvokeAsync（新的OnCheckEventArgs{IsChecked=checked，ItemId=@Id}）；
}
}

我的意图是从foreach循环内部传递姓名和Id，但在你的回答中，我不确定你是从哪里得到的？为了更好地理解，我对问题进行了编辑。谢谢教授，你能详细说明一下吗？我是C#新手，我的背景是Javascript。我已经编辑了这个问题。我认为其他人的回答更好。如果你注意到onclick我想传递而不仅仅是项，我想传递项。name and score.id。哦，是的，所以你可以让字典成为一种类似soYes的字典，EventCallback在直接绑定中是首选的。它是类型安全的，并自动调用StateHasChanged（）。我认为这并不重要。感谢您的回答，但我确实需要在父级中单击函数ItemClicked，以便在单击子级中的“跨度”时执行一些操作。我确实理解您的回答，但当密码在父级组件中发生更改时，您如何在控制台中记录密码？很抱歉，我没有完全理解您的评论问题。如果parents中的值已更改，则只需执行stateHasChanged，并应重新计算它。我确实发现有时候系统没有计算，我只是通过改变一些顶级变量来强制它。我想在某个地方有这样做的文档。。。我现在不记得了。我想你也可以在父级中编写一个事件处理程序，所以当点击子级时，你可以调用父级中的事件处理程序。例如，父级必须在此处传递EventCallback文档：。如何在父级组件中处理它？您已经在这样做了。WriteLine（）可以正常工作。如果要更新UI，则需要StateHasChanged（）。参数对此声明无效？我很感激，它只对不动产有效。

<ChildComponent Title="Panel Title from Parent"
            OnClickCallback="@ShowMessage">
    Content of the child component is supplied
    by the parent component.
</ChildComponent>

@code{

    private void ShowMessage(MouseEventArgs e)
    {
        messageText = $"Blaze a new trail with Blazor! ({e.ScreenX}, {e.ScreenY})";
    }

}

<span @onclick = "() => ItemClicked(item.name, score.id)"> @item.name</span>

@code 
{
   [Parameter] public Action<string,int> ItemClicked { get; set; }
}

<Checkbox Id="@Id" Checked="@Item.Checked" CheckChanged="OnCheck" />

<input type="checkbox" Id="@Id" checked="@Checked" @onchange="CheckboxChanged" />