C# 传递列表的事件<;字符串>;从孩子到父母
我正在尝试将C# 传递列表的事件<;字符串>;从孩子到父母,c#,events,blazor,blazor-webassembly,C#,Events,Blazor,Blazor Webassembly,我正在尝试将列表从孩子传递给家长。我在父组件中定义了一个操作,并将其作为参数传递给子组件。当子组件中发生事件时,预期结果是使用回调将更新的列表发送给父组件 我收到编译器错误参数2:无法在上的父组件中将“方法组”转换为“EventCallback”。如果将UpdateTags更改为UpdateTags()则会出现不同的错误。我还尝试将UpdateTags方法作为@(()=>UpdateTags)传递,但也不起作用。现在,我可以把我想传递给家长的信息放在会话本地存储中,并向家长发出信号,让他们从那里
列表
从孩子传递给家长。我在父组件中定义了一个操作
,并将其作为参数传递给子组件。当子组件中发生事件时,预期结果是使用回调将更新的列表发送给父组件
我收到编译器错误参数2:无法在
上的父组件中将“方法组”转换为“EventCallback”
。如果将UpdateTags
更改为UpdateTags()
则会出现不同的错误。我还尝试将UpdateTags
方法作为@(()=>UpdateTags)
传递,但也不起作用。现在,我可以把我想传递给家长的信息放在会话本地存储中,并向家长发出信号,让他们从那里获取信息,但这是承认失败的
如何使用事件回调按需将列表
从子级传递给父级
//Parent
<TagComponent UpDateNewTags="UpdateTags"></TagComponent>
// Parent function
public void UpdateTags (List<string> tags)
{
if (cpdto.NewTagTitles == null)
{
cpdto.NewTagTitles = new List<string>();
}
cpdto.NewTagTitles = tags;
}
//child component.
[Parameter]
public Action<List<string>> UpDateNewTags { get; set; }
//父对象
//父函数
公共无效更新标记(列表标记)
{
if(cpdto.NewTagTitles==null)
{
cpdto.NewTagTitles=新列表();
}
cpdto.NewTagTitles=标签;
}
//子组件。
[参数]
公共操作UpDateNewTags{get;set;}
确保没有丢失using指令。如果我没记错,您需要:
@using Microsoft.AspNetCore.Components
另外,不要使用Action,而是使用EventCallback:
[Parameter]
Public EventCallBack<List<string>> OnListUpdated {get; set;}
[参数]
Public EventCallBack OnListUpdated{get;set;}
要跨组件公开事件,请使用EventCallback。父组件可以将回调方法分配给子组件的EventCallback
下面的代码示例描述了如何创建一个标记列表
对象,该对象包含一个标记
对象列表,每个对象都包含一个名为标题
的字符串字段,以及如何将标记列表
对象绑定到子组件的属性,如何启用子组件中标记
对象列表的编辑,以及如何将更改传播回父组件
TagList.cs
剃刀索引
标签列表
@foreach(tagList.Tags中的var标记)
{
@标签.标题
}
@代码
{
私有标记列表标记列表{get;set;}=new TagList();
}
儿童剃须刀
要更新的标记列表
@foreach(标记列表中的var标记)
{
@*@onchange=“OnTagChanged”*@
}
@代码
{
[参数]
公共列表标记列表{get;set;}
[参数]
public EventCallback TagListChanged{get;set;}
私有void OnTagChanged(ChangeEventArgs args args,Tag Tag)
{
tag.Title=args.Value.ToString();
TagListChanged.InvokeAsync(标记列表);
}
}
请注意,每个标记对象都绑定到一个输入文本元素。。。更新给定的输入元素并进行制表时,将触发OnTagChanged事件处理程序,其中更新当前标记
对象的标题字段以反映新的更改,然后使用参数TagList调用TagListChanged
EventCallback。发生这种情况时,索引页面中定义的标记列表
对象将更新,然后自动调用statehaschange方法重新呈现页面
注意:Action委托不适用于当前需求,因为Action是封装返回void的方法的委托,但您希望返回字符串列表,因此无法使用它。如果有的话,Func委托就是您所需要的。但是在Blazor中编写代码的正确方法是使用EventCallback“delegate”,它实际上不是一个委托,而是一个为您生成正确委托的结构,另外还可以自动调用StateHasChanged方法。太棒了!非常感谢。
public class TagList
{
public List<Tag> Tags { get; set; } = new List<Tag>() { new Tag { Title = "tag1" },
new Tag { Title = "tag2" },
new Tag { Title = "tag3" }};
}
public class Tag
{
public string Title { get; set; }
}
<Child @bind-TagList="@tagList.Tags"/>
<div>
<p>List of tags</p>
@foreach (var tag in tagList.Tags)
{
<p>@tag.Title</p>
}
</div>
@code
{
private TagList tagList { get; set; } = new TagList();
}
<div>
<p>List of tags to update</p>
@foreach (var tag in TagList)
{
<p><input type="text" value="@tag.Title" @onchange="@((ChangeEventArgs args) => OnTagChanged(args, tag))"/></p> @*@onchange= "OnTagChanged"*@
}
</div>
@code
{
[Parameter]
public List<Tag> TagList { get; set; }
[Parameter]
public EventCallback<List<Tag>> TagListChanged { get; set; }
private void OnTagChanged(ChangeEventArgs args, Tag tag)
{
tag.Title = args.Value.ToString();
TagListChanged.InvokeAsync(TagList);
}
}