.net-core - 数据绑定 20但只有一种常见的 onchange 方法

Question

我有一个计算表，用户可以在其中输入几个头寸（基本价格，多个选项），这些头寸应该加起来。我正在努力绑定事件以将所有位置加起来为最终总数。问题是，@bind="" 不允许我为 each 调用一个 onchange 事件input，因此我必须为每个位置实现一个事件处理程序（总共大约 20 个）。

<input type="number" @bind="calc.BasicPrice" class="form-control" />
<input type="number" @bind="calc.Option" class="form-control" />

<input type="number" @bind="calc.Total" class="form-control" readonly/>

@code 
{
    private CalculationModel calc = new CalculationModel(); 
}

到目前为止，我尝试将一个UpdateBottomLine()方法绑定到输入 onchange 事件，如下所示：

   <input type="number" value="@calc.BasicPrice" 
                           @onchange="(e) => CalculateBottomLines(calc.BasicPrice.GetType(), e)"  
                           class="form-control" />
    
@code {
    
    private void CalculateBottomLines(Type field, ChangeEventArgs input)
    {

            input.Value = input.Value.ToString().Replace(".", ",");

            // Update the input variable
            calc.BasicPrice = Convert.ToDecimal( input.Value.ToString() ); // <-- The name of the receiving variable has to be determined dynamically, depending on the field that was changed

            // Update the total
            calc.Total = calc.BasicPrice + calc.Option;
    }
    
}

现在不幸的是，虽然当我更改基本价格时这会改变我的总价，但这还不能动态工作，但仅针对基本价格实施。我需要一个解决方案，我可以在其中传递对已更改为CalculateBottomLines()方法的字段的引用。

标签： .net-coreblazorblazor-server-sideblazor-client-side

Answer 1

在这里，我使用属性设置器重新计算总数并@bind:event="oninput"在输入时触发。

<input type="number" @bind="calc.BasicPrice" @bind:event="oninput" class="form-control" />
<input type="number" @bind="calc.Option" @bind:event="oninput" class="form-control" />
<input type="number" @bind="calc.Total" class="form-control" readonly />

@code {
    SomeModel calc = new SomeModel();
    public class SomeModel
    {
        public double BasicPrice
        {
            get => basicPrice;
            set { basicPrice = value; UpdateTotal(); }
        }
        public double Option
        {
            get => option;
            set { option = value; UpdateTotal(); }
        }

        public double Total { get; set; }

        internal void UpdateTotal()
        {
            Total = BasicPrice + Option;
        }

        private double basicPrice;
        private double option;
    }
}