20 <inputs> 的数据绑定，但只有一种常见的 onchange-method

Question

我有一个计算 sheet，用户可以在其中输入多个头寸（基本价格，多个选项），这些头寸应该加起来达到总数。我正在努力绑定事件以将所有位置加到最终总数。问题是，@bind="" 不允许我为每个 input 调用一个 onchange 事件，因此我必须为每个位置实现一个事件处理程序（总共大约 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() 方法的字段的引用。

Answer 1

这里我使用属性 setter 重新计算总数，@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;
    }
}

20 <inputs> 的数据绑定，但只有一种常见的 onchange-method

Data binding for 20 <inputs> but only one common onchange-method

.net-core

blazor

blazor-server-side

blazor-client-side