Blazor 将 columnname 参数传递给组件和组件中的第二个参数-解网

问：

所以我有一个 div，在这个 div 中有一个 Sort 组件。我想要实现的是，当我单击组件中的图标之一时，它应该使用以下参数调用 LoadProjects：columnname 和 isAscending。这取决于单击的图标，isAscending 应该是 true 还是 false。我将提供一些代码的屏幕截图。我在 ChatGPT 的帮助下对其进行了编码，但我遇到了一个错误。

[Table.razor 文件：]

<th class="M2 border-color">
    <div class="flex ml-[25px] flex-row text">
        <span>release</span>
        <Sort columnName="projectname" OnSortClick="LoadProjects"/>
        <Filter />
    </div>
</th>

[Table.razor 中的 LoadProjects 方法]

private async Task LoadProjects(string column, bool asc)
{
    projects = await projectsService.GetProjects(column, asc);
    sortedProjects = new List<Projects>(projects);
}

[排序组合]

<svg class="ml-[10px]" xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
    <path d="M8 0L14.4952 7.5H1.50481L8 0Z" fill="#C0C5CA" @onclick="HandleClickAsc" />
    <path d="M2.59926 13L8 19.2362L13.4007 13H2.59926Z" fill="#C0C5CA" stroke="#C0C5CA" @onclick="HandleClickDesc"/>
</svg>

@code{
 [Parameter] public string columnName { get; set; }
 [Parameter] public EventCallback<(string, bool)> OnSortClick { get; set; }

    private async Task HandleClickAsc()
    {
        await OnSortClick.InvokeAsync((columnName,false));
    }

    private async Task HandleClickDesc()
    {
        await OnSortClick.InvokeAsync((columnName, true));
    }
}

我希望你理解我想要实现的目标，并能帮助我。顺便说一句，我是 Blazor 的初学者。

我得到的错误是CS1503

ChatGPT，但并没有真正帮助

回调 blazor blazor-component

问题是如果我没有使用组件，对于“排序”，我可以在向上箭头图标上制作 @onclick=“LoadProjects（”projectname“， true），在向下箭头图标上制作 @onclick=”LoadProjects（“projectname”， false）。但是因为我使用一个组件，所以我不能那么容易做到。

答：

0赞 RBee 10/21/2023 #1

因为你要将匿名元组作为 EventCallback 有效负载传递。

[Parameter] public EventCallback<(string, bool)> OnSortClick { get; set; }

该方法无法自动将元组解构为局部变量。因此，您需要更显式地声明该方法将接受的参数，然后您可以像这样使用 and 变量。LoadProjects(string column, bool asc)columnasc

private async Task LoadProjects((string column, bool asc) tuple)
{
    // just use it directly
    tuple.column;
    tuple.asc;
    
    // or deconstruct to local variables
    string column = tuple.column;
    bool asc = tuple.asc;
    
    // or a shorthand deconstruction
    var (column, asc) = tuple;
}

IMO 在 EventCallbacks 中传递元组不是一个好的做法，因为它会给参数器增加不必要的复杂性，特别是考虑到您已经拥有作为公共参数并在组件外部访问它。ColumnName

代码片段演示

在演示中，我进行了以下更改。

我已更改您的排序方法单击以调用相同的方法，其中每个图标将传递不同的 bool 参数，例如HandleClick@onclick="(e)=>HandleClick(true)"
PascalCase 的属性是 Blazor 中命名公共参数时的约定。ColumnName

<svg class="ml-[10px]" xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
    <path d="M8 0L14.4952 7.5H1.50481L8 0Z" fill="#C0C5CA" @onclick="(e)=>HandleClick(true)" />
    <path d="M2.59926 13L8 19.2362L13.4007 13H2.59926Z" fill="#C0C5CA" stroke="#C0C5CA" @onclick="(e)=>HandleClick(false)"/>
</svg>

@code{
    [Parameter] public string ColumnName { get; set; }
    [Parameter] public EventCallback<(string, bool)> OnSortClick { get; set; }

    private async Task HandleClick(bool isAsc)
    {
        await OnSortClick.InvokeAsync((ColumnName,isAsc));
    }
}

上一个：警告：在 XtAddCallback 中找不到回调列表

下一个：在回调执行期间禁用 Plotly Dash 组件，然后在回调完成后重新启用它

Blazor 将 columnname 参数传递给组件和组件中的第二个参数

Blazor passing columnname parameter to component and second parameter in component

评论