Svelte

Question

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

Answer 1

在评论中讨论后编辑

由于分配给数组中的对象会触发重新渲染，因此您可以根据 [=15] 有条件地计算给定 unit 的新 siValue 和 usValue =] 标志，并更新该单元的值。这将使您可以在用户输入时同时更新 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}

这是 Svelte 上的示例 REPL。

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

Svelte - switching between two input values using a checkbox

input