Question

我希望我的文本输入能在单击并开始键入时清除，类似于Excel单元格，并且我的数字输入可以清除是否输入了非数字，或者如果值则更改为最后键入的数字大于24。数字部分正在工作，如果我键入25，则该单元格中的值将更改为5。

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

基本上，如何将e.target.value函数中的changeInput绑定到与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中验证输入并更改目标值？

1 个答案: