ASP.NET - Blazor - 从模板化组件返回单击的泛型类型

Question

我正在学习 Blazor 和 ASP.NET，过去 6 个月一直在学习 C#。

我做了一个简单的模板化组件:

@typeparam GenericType

<ul>
    @foreach (GenericType item in Items)
    { 
        <li @onclick="(x)=> ItemClicked(item)">FragmentToRender(item)</li>
    }    
</ul>

@code {
    [Parameter] public RenderFragment<GenericType> FragmentToRender { get; set; }

    [Parameter] public IReadOnlyList<GenericType> Items { get; set; }

    public void ItemClicked(GenericType item)
    {
         //To figure out...
    }
}

我在页面组件中使用它:

<TestComponent GenericType="Thing" Items="ListOfThings">
    <FragmentToRender>
        <p>@context.Field</p>
    </FragmentToRender>
</TestComponent>

@code
{
    private List<Thing> ListOfThings =
        new List<Thing> {
            new Thing("Test"),
            new Thing("Test2")
        };

    public class Thing
    {
        public readonly string Field;

        public Thing(string field) => Field = field;
    }    
}

当组件中 li 元素的 OnClick 事件被触发时，如何将项目的特定实例传递回页面组件(即，不同的组件可以对单击的项目执行某些操作，例如将其数据上传到某处)？

非常感谢

Answer 1

您应该使用 EventCallback来传递数据。

@typeparam GenericType

<ul>
    @foreach (GenericType item in Items)
    { 
        <li @onclick="(x)=> ItemClicked(item)">FragmentToRender(item)</li>
    }    
</ul>

@code {
    [Parameter] public RenderFragment<GenericType> FragmentToRender { get; set; }

    [Parameter] public IReadOnlyList<GenericType> Items { get; set; }

    // Added EventCallback parameter
    [Parameter] public EventCallback<GenericType> OnClick { get; set; }

    public void ItemClicked(GenericType item)
    {
         // Checking if EventCallback is set
         if(OnClick.HasDelegate)
         {
             // Calling EventCallback
             OnClick.InvokeAsync(item);
         }
    }
}

然后只需传递参数 OnClick到该组件以获取项目

@* Passing the OnClick parameter *@
<TestComponent GenericType="Thing" Items="ListOfThings" OnClick="@HandleClick">
    <FragmentToRender>
        <p>@context.Field</p>
    </FragmentToRender>
</TestComponent>

@code
{

    private void HandleClick(Thing item)
    {
        // Do what you want with the item
    }

    private List<Thing> ListOfThings =
        new List<Thing> {
            new Thing("Test"),
            new Thing("Test2")
        };

    public class Thing
    {
        public readonly string Field;

        public Thing(string field) => Field = field;
    }    
}