如果需要，我如何在 Svelte 中验证输入并更改目标值？

Question

我希望我的文本输入在我单击它并开始输入时清除，类似于 Excel 单元格，并且我的数字输入在输入非数字时清除，或者更改为如果值大于 24，则最后输入的数字。数字部分有效，如果我输入 25，单元格中的值将更改为 5。

由于数据的表格性质，我想将数据保存在数组中。

基本上，如何将 changeInput 函数中的 e.target.value 绑定到与 bind:value={x} 绑定的变量？

下面是我一直在尝试的完整代码，但它并没有像我希望的那样工作。

    let jobNames = ['Job1', 'Job2', 'Job3']
    let jobHours = Array.from(Array(3), () => Array.from(Array(2)));    
    let cell = Array.from(Array(3), () => Array.from(Array(3)));
    let newText = true

    function changeInput(e) {
    let value = e.target.value;
    let input = value.slice(-1); 
        if (newText) {
      newText = false;
      e.target.value = input;
    }

    if (e.target.type === 'number') {
      if (!Number(input) && Number(input) !== 0) {
        e.target.value = '';
      }

      if (Number(value) > 24) {
        e.target.value = input;
      }
    }
  }
</script>

<style>
  container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
        border-top: solid black 1px;
    border-left: solid black 1px;       
  }
  input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    border-bottom: solid black 1px;
    border-right: solid black 1px;
    min-width: 50px;
  }
</style>

<container>
  {#each jobNames as name, i}
            <input
                type="text"
                data-cell={`${i}-0`}
                bind:this={cell[i][0]}
                                bind:value={name}
                on:input={changeInput}
                on:click={e => {newText = true; console.log(newText)}}
            />
        {#each jobHours[i] as hour, j}
            <input
                class="text-center"
                type="number"
                data-cell={`${i}-${j+1}`}
                bind:this={cell[i][j+1]}
                                bind:value={hour}
                on:input={changeInput}
                on:click={e => newText = true}
            />
        {/each} 
  {/each}
</container>

Answer 1

您需要在用户键入时从模板传递索引，以便我们可以访问数组 jobNames 和 jobHours.

中的绑定元素

这是您的代码现在的样子

<script>
    // Declare variables here

    function changeInput(e, i, j) {
        const value = e.target.value;
        const input = e.data;

        if (newText) {
            newText = false;
            jobNames[i] = input;
        }

        if (!Number(input) && Number(input) !== 0) {
            console.log('entered');
            jobHours[i][j] = '';
        }

        if (Number(e.target.value) > 24) {
            jobHours[i][j] = input;
        }
    }
</script>

{#each jobNames as name, i}
    <input
        type="text"
        data-cell={`${i}-0`}
        bind:this={cell[i][0]}
        bind:value={name}
        on:input={e => changeInput(e, i)}
        on:click={e => {newText = true}}
    />
    {#each jobHours[i] as hour, j}
        <input
            class="text-center"
            type="text"
            data-cell={`${i}-${j+1}`}
            bind:this={cell[i][j+1]}
            bind:value={hour}
            on:input={e => changeInput(e, i, j)}
        />
    {/each} 
{/each}

这是 REPL 上的一个工作示例。

如果需要，我如何在 Svelte 中验证输入并更改目标值？

How do I validate an input and change the target value if needed in Svelte?

svelte