Svelte - переключение между двумя входными значениями с помощью флажка - PullRequest
Новая
       12

Svelte - переключение между двумя входными значениями с помощью флажка

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

Я новичок в svelte и пытаюсь выяснить, как изменить значение по умолчанию для ввода, когда установлен флажок, а также использовать это измененное значение в расчете.

Код, который у меня естьработает: 

 <label> {#if yes}
SI Units to US Units
{:else}
    US Units to SI units
{/if}
<input type=checkbox bind:checked={yes}>
</label>


{#if yes}
<input bind:value={siValue}>        
{:else}
<input bind:value={usValue}>        
{/if}

{#if yes}
<span>{((siValue / factor)).toFixed(2)}</span>
{:else}
<span>{((usValue * factor)).toFixed(2)}</span>
{/if}

То, что я хотел бы сделать, это использовать только один вход и изменить значение по умолчанию, а также иметь возможность вручную изменить значение ввода, но у меня возникли проблемы с его получением,Значение меняется, но когда я пытаюсь изменить числовое значение вручную, вычисление не работает.

Вот этот код: 

 <input value={yes ? siValue : usValue} on:input="{e => setUnitVal(e.target.value)}">


<script>
let yes = false;
let siValue = '';
let usValue = '';

function setUnitVal(value) {
    siValue = +value;
    usValue = +value;
}   

</script>

Ответы [ 2 ]

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

Вот еще один способ сделать то же самое.Вы можете использовать синтаксис метки JS $:, чтобы сделать значения usValue и siValue реактивными.Мы не будем помещать $: непосредственно в usValue и siValue, поскольку это создаст циклическую зависимость, поскольку usValue зависит от siValue и наоборот.Вместо этого мы поместим его в переменную yes и условно назначим usValue и siValue.

Затем в шаблоне все, что нам нужно сделать, - это связать входные данные value и span сих соответствующие переменные, в то время как синтаксис меток JS позаботится о вычислении для нас. 

<script>
    let yes = false;
    let factor = 1.2;
    let siValue = '';
    let usValue = '';
    $: yes ? usValue = (siValue / factor).toFixed(2) : siValue = (usValue * factor).toFixed(2);
</script>

<label>
    {#if yes}
        SI Units to US Units
    {:else}
        US Units to SI units
    {/if}
    <input type=checkbox bind:checked={yes}>
</label>

{#if yes}
    <input bind:value={siValue}>
    <span>{usValue}</span>
{:else}
    <input bind:value={usValue}>
    <span>{siValue}</span>
{/if}

Вот пример на Svelte REPL .

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

Отредактировано после разговора в комментариях

Поскольку назначение объекта в массиве запускает повторный рендеринг, вы можете условно вычислить новые siValue и usValue длязадайте unit на основе флага yes и обновите значения для этой единицы.Это позволит вам обновлять значения SI и US как пользовательские типы, чтобы они могли свободно переключаться, какое значение вводится во входные данные. 

<script>
  let yes = false;

  const units = [{
    "factor": "6.614",
    "siValue": "66",
    "usValue": "10"
  }, {
    "factor": "97.95",
    "siValue": "100",
    "usValue": "1"
  }];

  function setUnitVal(value, index) {
    const { factor } = units[index];

    units[index].siValue = yes ? value : (value * factor).toFixed(2);
    units[index].usValue = yes ? (value / factor).toFixed(2) : value;
  }
</script>

<label>
  {#if yes}SI Units to US Units{:else}US Units to SI units{/if}
  <input type="checkbox" bind:checked={yes} />
</label>

{#each unitValues as { usValue, siValue, factor}, i}    
  <div>
    <input
      value={yes ? siValue : usValue}
      on:input={e => setUnitVal(e.target.value, i)} />

    {#if yes}
      <span>{usValue}</span>
    {:else}
      <span>{siValue}</span>
    {/if}
  </div>
{/each}

Если вы хотите иметь возможность вернуться кпо умолчанию, тогда вы могли бы клонировать этот массив units при загрузке и восстановить исходные значения по желанию, например, так: 

<script>
  import _ from 'lodash'

  const units = [...];

  let unitValues = [];

  function resetUnitValues() {
    unitValues = _.cloneDeep(units);
  }

  resetUnitValues();
</script>

...

<button on:click={resetUnitValues}>Clear</button>

Вот все это в REPL Svelte: https://svelte.dev/repl/aed32ef30b02448aafd173e0baf681b0?version=3.12.1

Надеюсь, это поможет!

...