在 Blazor 中单击按钮时获取表格行中输入字段的值

Question

我在一组产品上呈现一个表格，每一行都有一个带有点击事件的按钮来传递该行的产品。这行得通。

我想要完成的是在同一个按钮上单击该行的输入字段的值：

<tbody>
    @foreach (var product in products)
    {
        <tr>
            <td>@product.Day</td>
            <td>@product.Name</td>
            <td>@product.Price</td>
            <td>
                <img src="images/@(product.Name).jpg" alt="" style="width:100px;" />
            </td>
            <td>
                <input type="text" id="amount" />
            </td>
            <td><button @onclick="(() => Add(product))" >Add</button></td>
        </tr>
    }
</tbody>

在后面的代码中我有以下方法（仅在放入产品时有效）：

protected async Task Add(Product product)
{

}

如何更改输入字段（或将其替换为编辑表单中每一行的 InputText？）并将其传递给 Add 方法，如

protected async Task Add(Product product, int amount)
{

}

Answer 1

只需将输入的值绑定到字段或属性。然后你可以在你的方法中使用它：

<input type="text" id="amount" @bind-value="@_amount" />

@code {
    private int _amount = 0;
    
    protected async Task Add(Product product)
    {
        if (_amount > 0)
                ...
    }
}

Answer 2

我尝试了一种不同的方法并将 Amount 属性添加到 Product 类：

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
    public DayOfWeek Day { get; set; }
    public int Amount { get; set; }
}

在我的页面中，我让它像这样工作：

@foreach (var product in products)
{
    <tr>
        <td>@product.Day</td>
        <td>@product.Name</td>
        <td>@product.Price</td>
        <td>
            <img src="images/@(product.Name).jpg" alt="" style="width:100px;" />
        </td>
        <td>            
            <input type="text" @bind-value="@product.Amount" />
        </td>
        <td><button @onclick="(() => Add(product))" >Add</button></td>
    </tr>
}

在我的函数中，我获取输入字段的值，并在处理完金额后将其设置回 0：

protected async Task Add(Product product)
{
    // do something useful with the amount and set it back to 0
    product.Amount = 0;
}

不过，如果有其他解决方案可以将其作为参数传递，我想知道。