Blazor 简单算术示例

Question

我做了一个例子来学习 Blazor。例子就是把重量和重心相乘得到力矩。

目标是在重量或重心发生变化时执行计算。 我收到以下错误。

该元素的属性“onchange”被使用了两次或多次。属性必须是唯一的（不区分大小写）。 '@bind' 指令属性使用属性'onchange'。

你能帮我实现目标吗？

 <h3>MomentBasicCalc</h3>

<div class="container">
    <div class="row">
        <div class="col-sm">
            <label for="weight">Weights</label>
            <input type="text" class="form-control" id="weight"
                   @onchange="Calc"  @bind="@Weight" />
        </div>
        <div class="col-sm">
            <label for="CG">CG</label>
            <input type="text" class="form-control" id="CG"
                    @onchange="Calc" @bind=@Cg />
        </div>
        <div class="col-sm">
            <label for="Moment">Moment</label>
            <input type="text" class="form-control" id="Moment" value=@Moment readonly />
        </div>
    </div>
</div>



@code {
    public double Weight { get; set; }
    public double Cg { get; set; } 
    public double Moment { get; set; }

    void Calc()
    {

        Moment = Weight * Cg;

    }
}

Answer 1

不支持在单个事件上附加多个事件处理程序。 你应该这样做：

<div class="container">
        <div class="row">
            <div class="col-sm">
                <label for="weight">Weights</label>
                <input type="text" class="form-control" id="weight"
                       **value="@Weight**
                       @onchange="SetWeight"  "/>
            </div>
            <div class="col-sm">
                <label for="CG">CG</label>
                <input type="text" class="form-control" id="CG"
                        **value=@Cg**
                        @onchange="SetCG"  />
            </div>
            <div class="col-sm">
                <label for="Moment">Moment</label>
                <input type="text" class="form-control" id="Moment" value=@Moment readonly />
            </div>
        </div>
    </div>

@code
{
    void SetWeight(UIChangeEventArgs e)
        {
            Weight = (string) e.Value;
            Calc();
        }

    void SetCG(UIChangeEventArgs e)
        {
            CG = (string) e.Value;
            Calc();
        }

}