Blazor 简单算术示例

Question

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

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

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

你能帮我实现目标吗？

 <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();
        }

}

Blazor 简单算术示例

Blazor Simple Arithmetic Example

blazor-client-side