Question

如何在子组件中的onClick事件上将多个参数从子对象传递给父对象

儿童剃刀

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

父母剃刀

<Child ItemClicked = "@ItemClicked"/>

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

Answer 1

在儿童中

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

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

Answer 2

您需要将其分配给仅接收一个参数的事件回调，因此您可以创建字典或创建类并将其传递给对象。

将整个项目传递给Parent组件，然后可以从此处获取ID。

foo :: HList (Map f xs) -> Bool
foo _ = True

附字典

xs

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

Answer 3

您可以做的是为要尝试传递回父级的参数创建一个新类。在此示例中，我使用的是通用复选框组件，该组件传递Id和Checked属性，因为我需要知道我在父组件中选择的项以及是否已选中。因此，事件需要知道ID以及是否已检查。子组件包含其自身的逻辑，然后向上传递一个新对象，并为其分配了父组件现在可以使用的值。

父母

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

public class OnCheckEventArgs
{
    public bool IsChecked {get; set;}
    public long ItemId {get; set;}
}

public class ItemsOverview : ComponentBase
{
    public void OnCheck(OnCheckEventArgs args)
    {
        // do stuff
    }
}

孩子

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

public partial class Checkbox : ComponentBase
{
    [Parameter]
    public long Id {get; set;}

    [Parameter]
    public bool Checked {get; set;}

    [Parameter]
    public EventCallback<OnCheckEventArgs> CheckChanged {get; set;}

    protected async Task OnCheckChange(bool checked)
    {
        // do stuff
        await CheckChanged.InvokeAsync(new OnCheckEventArgs { IsChecked = checked, ItemId = @Id });
    }
}

Answer 4

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

之类的对象

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

然后您可以使用

父母

 private void ItemClicked(Student student)
    {
        Console.WriteLine(student.Name);
        Console.WriteLine(student.Id);
    }

孩子

<span @onclick = "ItemClicked(student)"> @item.name </span>

Answer 5

根据Microsoft文档，也许您想做绑定？这是链接： https://docs.microsoft.com/en-us/aspnet/core/blazor/data-binding?view=aspnetcore-3.1

搜索“使用链式绑定的子对父绑定”

<h1>Child Component</h1>
<input @oninput="OnPasswordChanged" 
   required 
   type="@(showPassword ? "text" : "password")" 
   value="@Password" />
@code {
    private bool showPassword;

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

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

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        Password = e.Value.ToString();

        return PasswordChanged.InvokeAsync(Password);
    }


}

父母：

<h1>Parent Component</h1>

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

@code {
    private string password;
}

Answer 6

另一个答案：因为您更改了问题

也许是事件处理：https://docs.microsoft.com/en-us/aspnet/core/blazor/event-handling?view=aspnetcore-3.1

阅读本节：EventCallback并考虑EventCallback

孩子：触发父组件方法

[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }

父母：

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

}

您可能需要@on {EVENT}：preventDefault

Blazor-将参数传递给父对象

6 个答案: