1

昨天我试图将我必须在 React 中解决的问题翻译成 Svelte，但我无法弄清楚。

问题如下：

  • 我有 3 个输入，每个输入都有一个百分比。
  • 三个百分比加起来不能超过 100。
  • 我有第四个输入，它被禁用了，所以它只显示剩余百分比为 100%

在反应中相当容易，声明一个函数，事件和一个变量来知道我从哪个输入中获取事件。进行适当的验证并完成。

可悲的是，在苗条的我几乎没有经验，我不知道如何解决它。这是到目前为止的代码（剧透警告它甚至没有接近做应该做的事情）。 苗条的 REPL

运行 console.log 以显示 sp1 的值，在验证它的函数内部和函数外部（函数之前和之后）显示我所期望的：

  • 函数前（before）：输入中的值
  • 函数内部：值已验证
  • 函数外（之后）：值已验证

所以正确值的验证和分配发生了，但是输入仍然显示错误的值（例如：输入显示 112，值应该是 100）。

4

2 回答 2

1

一种更动态的方法是使用数组。

let inputs = [{
    value: 0,
    color: 'GRAY'
}, {
    value: 0,
    color: 'DARKSLATEGRAY'
}, {
    value: 0,
    color: 'TEAL'
}];

这也将使计算更容易，因为我们可以使用数组方法。它还将使我们能够使用each删除冗余代码的块。然后我们将使用一个调用函数validate并将当前输入的索引传递给它。使用input我们可以计算可以输入的最大可能值，input并设置input它是否超过该最大值。此validate函数将从input事件的模板中调用。

这是代码。

<script>
    let total = 100;
    let inputs = [{
        value: 0,
        color: 'GRAY'
    }, {
        value: 0,
        color: 'DARKSLATEGRAY'
    }, {
        value: 0,
        color: 'TEAL'
    }];
    $: spOthers = total - inputs.map(x => x.value || 0).reduce((a, b) => a + b);

    function validate(index) {
        let maxInput = total - inputs.map(x => x.value).filter((x, i) => i !== index).reduce((a, b) => a + b);
        if (inputs[index].value > maxInput) {
            inputs[index].value = maxInput;
        }
    }
</script>

{#each inputs as {value, color}, i}
    <div class='input-container'>
        <div class='square' style="background-color: {color}" />
        <input type="number" min="0" class='input' bind:value={value} on:input={() => validate(i)} />
    </div>
{/each}
<div class='input-container'>
    <div class='square' style="background-color: DARKORANGE" />
    <input type='number' class='input input-others' bind:value={spOthers} disabled/>
</div>

注意：我省略了上面的样式，因为它们没有变化。

这是一个有效的REPL。

于 2019-09-27T14:36:14.940 回答
0

好的。你也可以这样做：

$: spOthers = inputs.reduce((a, c, i, inputs) => a + c.value, 0);

function validate(index) {
    const delta = spOthers - total;
    if (delta > 0) {
        inputs[index].value -= delta;   
    }
}
于 2019-09-27T16:23:46.810 回答