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

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

Проблема в следующем:

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

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

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

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

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

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


javascript svelte svelte-3
person Germán    schedule 27.09.2019    source источник
comment
Пожалуйста, добавьте код, который вы уже пробовали, я боюсь, что никто не напишет код за вас ...   -  person Mac_W    schedule 27.09.2019
comment
Код уже предоставлен в ссылке Svelte REPL, я думал, это было хорошо видно.   -  person Germán    schedule 27.09.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

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.

person nash11    schedule 27.09.2019
comment
Спасибо! Решение мне очень нравится, это именно то, что я искал :) - person Germán; 27.09.2019

arrow_upward
0
arrow_downward

Отлично. Вы также можете:

$: 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;   
    }
}
person voscausa    schedule 27.09.2019