web-dev-qa-db-ja.com

Blazor-引数を親に渡す

子コンポーネントの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);
    }
}
c#asp.netrazorblazor
2
Ahmed Imam

「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>
0
ahmetsse

できることは、親に渡そうとしている引数の新しいクラスを作成することです。この例では、親コンポーネントで選択しているアイテムと、チェックされているかどうかを知る必要があるため、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 });
    }
}
0
visualbam

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;
}
0
Jason Chen

別の答え：質問を変更したため

多分イベント処理： 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が必要かもしれません

0
Jason Chen