Blazor - 组件包装和数据绑定

Question

我在 blazor 组件中进行了范围输入。现在我正在尝试进行对数范围输入。

为此，我想使用我的第一个范围输入，并简单地在范围输入中的假值和真实值之间创建一个包装器。

但我认为我还没有很好地理解组件绑定，索引页没有收到修改通知。

这是范围输入组件：

<div id="rc-@ID">
    @(new MarkupString($@"<style>
                #rc-{ID} {{
                    position: relative;
                    width: 100%;
                }}

                #rc-{ID} > input[type='range'] {{
                    padding: 0;
                    margin: 0;
                    display: inline-block;
                    vertical-align: top;
                    width: 100%;
                    --range-color: hsl(211deg 100% 50%);
                    background: var(--track-background);
                }}
                #rc-{ID} > input[type='range']::-moz-range-track {{
                    border-color: transparent; /* needed to switch FF to 'styleable' control */
                }}
                #rc-{ID} > input[name='low-range'] {{
                    position: absolute;
                }}
                #rc-{ID} > input[name='low-range']::-webkit-slider-thumb {{
                    position: relative;
                    z-index: 2;
                }}
                #rc-{ID} > input[name='low-range']::-moz-range-thumb {{
                        transform: scale(1); /* FF doesn't apply position it seems */
                        z-index: 1;
                    }}
                #rc-{ID} > input[name='high-range'] {{
                    position: relative;
                    --track-background: linear-gradient(to right, transparent {(int)(100 * (LowerValue - MinBound) / (MaxBound - MinBound) + 1 + 0.5f)}%, var(--range-color) 0, var(--range-color) {(int)(100 * (HigherValue - MinBound) / (MaxBound - MinBound) - 1 + 0.5f)}%, transparent 0 ) no-repeat 0 50% / 100% 100%;
                    background: linear-gradient(to right, gray {(int)(100 * (LowerValue - MinBound) / (MaxBound - MinBound) + 1+ 0.5f)}%, transparent 0, transparent {(int)(100 * (HigherValue - MinBound) / (MaxBound - MinBound) - 1 + 0.5f)}%, gray 0 ) no-repeat 0 50% / 100% 30%
                }}

                #rc-{ID} > input[type='range']::-webkit-slider-runnable-track {{
                    background: var(--track-background);
                }}

                #rc-{ID} > input[type='range']::-moz-range-track {{
                    background: var(--track-background);
                }}
            </style>"))
    <input class="custom-range" name="low-range" type="range" min="@MinBound" max="@MaxBound" step="@Step" @bind="@LowerValue" @bind:event="oninput" />
    <input class="custom-range" name="high-range" type="range" min="@MinBound" max="@MaxBound" step="@Step" @bind="@HigherValue" @bind:event="oninput" />
</div>

@code
{
    [Parameter] public float MinBound { get; set; } = 0;
    [Parameter] public float MaxBound { get; set; } = 1;
    [Parameter] public float Step { get; set; } = 0.01f;
    [Parameter]
    public float? ValueLow
    {
        get
        {
            var res = Math.Min(_valueLow, _valueHigh);
            if (res == MinBound)
                return null;
            return res;
        }
        set
        {
            if (!value.HasValue)
            {
                if (_valueLow.Equals(MinBound))
                    return;
                _valueLow = MinBound;
            }
            else
            {
                if (_valueLow.Equals(value.Value))
                    return;
                _valueLow = value.Value;
            }

            if (_valueLow > _valueHigh)
            {
                _valueLow = _valueHigh;
                _valueHigh = value.Value;
                ValueHighChanged.InvokeAsync(_valueHigh);
            }

            if (_valueLow == MinBound)
                ValueLowChanged.InvokeAsync(null);
            else
                ValueLowChanged.InvokeAsync(_valueLow);
        }
    }
    [Parameter]
    public float? ValueHigh
    {
        get
        {
            var res = Math.Max(_valueLow, _valueHigh);
            if (res == MaxBound)
                return null;
            return res;
        }
        set
        {
            if (!value.HasValue)
            {
                if (_valueHigh.Equals(MaxBound))
                    return;
                _valueHigh = MaxBound;
            }
            else
            {
                if (_valueHigh.Equals(value.Value))
                    return;

                _valueHigh = value.Value;
            }
            if (_valueLow > _valueHigh)
            {
                _valueHigh = _valueLow;
                _valueLow = value.Value;
                ValueLowChanged.InvokeAsync(_valueLow);
            }

            if (_valueHigh == MaxBound)
                ValueHighChanged.InvokeAsync(null);
            else
                ValueHighChanged.InvokeAsync(_valueHigh);
        }
    }


    [Parameter] public EventCallback<float?> ValueLowChanged { get; set; }
    [Parameter] public EventCallback<float?> ValueHighChanged { get; set; }

    float _valueLow = 0;
    float _valueHigh = 1;
    private float LowerValue
    {
        get => Math.Min(_valueLow, _valueHigh);
        set => ValueLow = value;
    }
    private float HigherValue
    {
        get => Math.Max(_valueLow, _valueHigh);
        set => ValueHigh = value;
    }


    string ID = Guid.NewGuid().ToString().Replace("-", "").Substring(15);
}

这是我的范围输入日志组件：

<RangeControl @bind-ValueLow="Low"
              @bind-ValueHigh="High"
              MaxBound="max"
              MinBound="min"
              Step="1" />
<div class="d-flex">
    <strong>Log values : </strong>
    <span>@Low</span>
    <span class="ml-2">@High</span>
</div>

@code
{
    private float min = 1.0f;
    private float max = 100.0f;

    [Parameter] public float MinBound { get; set; } = 10;
    [Parameter] public float MaxBound { get; set; } = 10000;
    [Parameter] public float Step { get; set; } = 1;


    private float r => MinBound == 0 ? MaxBound : (MaxBound / MinBound);

    private float? _valueLow;
    [Parameter]
    public float? ValueLow
    {
        get => _valueLow;
        set
        {
            if (value == _valueLow) return;
            _valueLow = value;
            ValueLowChanged.InvokeAsync(ValueLow);
        }
    }

    private float? _valueHigh;
    [Parameter]
    public float? ValueHigh
    {
        get => _valueHigh;
        set
        {
            if (value == _valueHigh) return;
            _valueHigh = value;
            ValueHighChanged.InvokeAsync(ValueHigh);
        }
    }



    private float? Low
    {
        get
        {
            if (ValueLow.HasValue)
                return (float)((min = max) * Math.Log(ValueLow.Value) / Math.Log(r));
            return null;
        }
        set
        {
            if (value.HasValue)
                ValueLow = (float)Math.Exp(value.Value * Math.Log(r) / (max - min));
            else
                ValueLow = null;
        }
    }
    private float? High
    {
        get
        {
            if (ValueHigh.HasValue)
                return (float)((min = max) * Math.Log(ValueHigh.Value) / Math.Log(r));
            return null;
        }
        set
        {
            if (value.HasValue)
                ValueHigh = (float)Math.Exp(value.Value * Math.Log(r) / (max - min));
            else
                ValueHigh = null;
        }
    }

    [Parameter] public EventCallback<float?> ValueLowChanged { get; set; }
    [Parameter] public EventCallback<float?> ValueHighChanged { get; set; }
}

和索引页：

@page "/"

<h1>Hello, world!</h1>

<RangeControl @bind-ValueHigh="ValueHigh" @bind-ValueLow="ValueLow" MinBound="10" MaxBound="10000" Step="1"></RangeControl>
<br />
<RangeControlLog @bind-ValueHigh="ValueHigh" @bind-ValueLow="ValueLow" MinBound="10" MaxBound="10000" Step="1"></RangeControlLog>

<div class="d-flex">
    <strong>Real values : </strong>
    <span>@ValueLow</span>
    <span class="ml-2">@ValueHigh</span>
</div>

@code {
    float? ValueHigh = null;
    float? ValueLow = null;
}

Answer 1

您不能嵌套@bind-，即拥有一个使用包装组件的包装器@bind-，并且还公开要与 一起使用的属性@bind-。

您需要将Foo和传递FooChanged给被包装的组件。

这意味着在您的 中RangeControlLog，您需要传递给RangeControl ValueLowandValueLowChanged而不是使用@bind-ValueLow

<RangeControl ValueLow="Low"
              ValueHigh="High"
              ValueLowChanged="ValueLowChanged"
              ValueHighChanged="ValueHighChanged"
              MaxBound="max"
              MinBound="min"
              Step="1" />

要了解更多信息，您可以查看有关链式绑定的文档，还可以查看我提出的这个问题ValueChanged，以更好地了解它及其工作原理。

但简而言之，当您使用@bind-Foo="Bar"它时，会将其转换为Foo="Bar"，FooChanged="@(foo => Bar = foo;)"这是更新属性的默认值。但当你有多个时它不起作用@bind-，所以你需要直接传递它。

对我来说，@bind-看起来像是绑定属性的语法糖，当您拥有参数Foo和时FooChanged，您可以使用@bind-Foo.