在 Blazor 中使用 @onkeyup

Question

所以我正在 blazor 中制作一个简单的应用程序来转换一些测量值。我有一个输入应该触发函数 ConvertUnits()。我希望每次在输入中键入内容时都会触发它，但由于某种原因它只有在按 Enter 后才会触发。 每次在输入中输入一些数字时，我应该怎么做才能触发该函数？

这是输入：

<input type="number" class="form-control @(lengthValue <= 0 ? "bg-danger" : "bg-success")" @bind="lengthValue" @oninput="(e => { OnChangeValue(e); })" @onkeyup="(e => { ConvertUnits(); })" />

这是函数：

    private void ConvertUnits()
    {
       result = ConvertLength(lengthValue, selectedLengthUnit, selectedTargetLengthUnit); 
    }

    private double ConvertLength(double value, string fromUnit, string toUnit)
    {
        Dictionary<string, double> lengthFactors = new Dictionary<string, double>
        {
            { "Metry", 1.0 },
            { "Cale", 39.3701 },
            { "Stopy", 3.28084 },
            { "", 0 }
        };

        fromUnit ??= "";
        toUnit ??= "";

        if (lengthFactors.ContainsKey(fromUnit) && lengthFactors.ContainsKey(toUnit))
        {
            return value * lengthFactors[toUnit] / lengthFactors[fromUnit];
        }
        else
        {
            return 0;
        }
    }

我想我尝试了所有的事件监听器，包括 @onblur、@onkeydown、@oninput 等。

Answer 1

您无需求助于关键事件。

以下是如何使用普通事件。我冒昧地通过将转换代码封装到值对象中来重构您的转换代码。

@page "/"

<PageTitle>Metre Converter</PageTitle>

<h1>Metre Converter</h1>

Welcome to your new app.
<div>
    <label>Enter Value in Metres</label>
    <input type="number" class="form-control mb-3" min="0"
           @bind="lengthValue"
           @bind:after="ConvertUnits"
           @bind:event="oninput" />
</div>

<select class="form-select mb-3" @bind="_selectedUnit" @bind:after="ConvertUnits">
    @if(_selectedUnit is null)
    {
        <option value="" selected disabled> -- Select a Unit -- </option>
    }
    @foreach (var unit in Enum.GetNames(typeof(Length.Units)))
    {
        <option value="@unit">@unit</option>
    }
</select>

<div>
    <pre>Conversion = @_convertedValue</pre>
</div>

@code {
    private double lengthValue;
    private string? _selectedUnit;
    private double? _convertedValue;

    private void ConvertUnits()
    {
        var number = Length.FromMetres(lengthValue);
        _convertedValue = number.GetUnitValue(_selectedUnit);
    }

    public record Length
    {
        private double _length { get; init; }

        private Length(double lengthInMetres)
            => _length = lengthInMetres;

        public double GetUnitValue(string? units)
        {
            if (units is null)
                return this.UnitValue(Units.Metres);

            var u = (Units)Enum.Parse(typeof(Units), units);
            return this.UnitValue(u);
        }

        public double UnitValue(Units units)
            => units switch
            {
                Units.Millimetres => _length * 1000,
                Units.Inches => _length * InchesConversion,
                Units.Feet => _length * FeetConversion,
                _ => _length
            };

        public enum Units
        {
            Metres,
            Inches,
            Feet,
            Millimetres
        }

        public const double FeetConversion = 3.28084;
        public const double InchesConversion = 39.2701;

        public static Length FromMetres(double metres)
            => new(metres);

        public static Length FromFeet(double feet)
            => new(feet / FeetConversion);

        public static Length FromInches(double inches)
            => new(inches / InchesConversion);

    }
}