Question

我是新手，我试图弄清楚如何在选中复选框时更改输入的默认值，并在计算中使用此更改的值。

我拥有的代码有效：

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

Answer 1

评论后编辑

由于分配给数组中的对象会触发重新渲染，因此您可以根据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>

这是Svelte REPL中的全部内容：https://svelte.dev/repl/aed32ef30b02448aafd173e0baf681b0?version=3.12.1

希望有帮助！

Answer 2

这是另一种方法。您可以使用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}

以下是斯维尔特REPL上的一个例子。

Svelte-使用复选框在两个输入值之间切换

2 个答案: