Проверка входа в Svelte3 - PullRequest
Новая
       13

Проверка входа в Svelte3

1 голос
/ 27 сентября 2019

Вчера я пытался перевести проблему, которую мне пришлось решить в React, на Svelte, и я не могу ее понять.

Проблема заключается в следующем:

  • У меня есть 3 входа, каждый из которых содержит процент.
  • 3 процента не могут добавить более 100.
  • У меня четвертый вход, он отключен, поэтому он просто показывает оставшиесяв процентах до 100%

Реагировать довольно просто, объявить функцию, которая принимает событие и переменную, чтобы узнать, с какого ввода я получаю событие.Сделайте правильные проверки и сделайте.

К сожалению, у меня почти 0 опыта, и я не знаю, как справиться с этим.Это код до сих пор (спойлер предупреждает, что он даже близко не подходит, чтобы делать то, что должен делать). Svelte REPL

Запуск console.log для отображения значения sp1, внутри функции, которая его проверяет, и вне функции (до и после функции), показывает то, что я ожидаю:

  • Перед функцией (до): значение на входе
  • Внутри функции: значение подтверждено
  • За пределами функции (после): значение подтверждено

Таким образом, проверка и присвоение правильного значения происходит, тем не менее, на входе отображается неправильное значение (например, на входе отображается 112, а значение должно быть 100).

Ответы [ 2 ]

0 голосов
/ 27 сентября 2019

Nice.Вы также можете сделать: 

$: 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;   
    }
}
0 голосов
/ 27 сентября 2019

Более динамичный способ сделать это - использовать массивы. 

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 .

...