Javascript Svelte3输入验证

昨天我试着把一个我必须在React中解决的问题翻译成Slvelte，但我想不出来

问题如下：

• 我有3个输入，每一个都有一个百分比
• 这3个百分比加起来不能超过100
• 我有第四个输入，它是禁用的，所以它只显示剩余的百分比到100%

在react中，声明一个获取事件的函数、事件和一个变量，以了解获取事件的输入。进行适当的验证并完成

不幸的是，在苗条我几乎没有经验，我不知道如何应对它。 这是迄今为止的代码（扰流板警报，它甚至没有接近于执行所需的操作）。

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

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

---

因此，验证和分配正确的值是正确的，但是输入显示错误的值（例如：输入显示112，值应该是100）。

更动态的方法是使用数组

let输入=[{
值：0，
颜色：“灰色”
}, {
值：0，
颜色：“深灰色”
}, {
值：0，
颜色：“青色”
}];

由于我们可以使用数组方法，这也会使计算更容易。它还使我们能够使用

每个
块来删除冗余代码。然后我们将使用一个名为
validate
的函数，并将当前输入的索引传递给它。使用
输入
我们可以计算可在该
输入
中输入的最大可能值，并设置
输入
是否超过该最大值。此
验证
函数将从
输入
事件的模板中调用

这是密码

<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>


总数=100；
让输入=[{
值：0，
颜色：“灰色”
}, {
值：0，
颜色：“深灰色”
}, {
值：0，
颜色：“青色”
}];
$：spOthers=total-inputs.map（x=>x.value | | 0）.reduce（（a，b）=>a+b）；
函数验证（索引）{
让maxInput=total-inputs.map（x=>x.value）.filter（（x，i）=>i！==index）.reduce（（a，b）=>a+b）；
if（输入[索引]。值>最大输入）{
输入[索引]。值=最大输入；
}
}
{#每个输入为{value，color}，i}
验证（i）}/>
{/每个}

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

这是一张工作票。
不错。您还可以执行以下操作：

$: 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;   
    }
}

请添加一些您已经尝试过的代码，恐怕没有人会为您编写代码…该代码已在链接“Svelte REPL”中提供，我认为它清晰可见。谢谢！我真的很喜欢这个解决方案，这正是我一直在寻找的：）