Svelte

Question

我有一个 binding an input using Svelte 的简单演示应用程序。这可行，但在同一元素的单击处理程序中，我希望重置绑定值。

具体来说，我已将 input 绑定到 draftMessage，并希望在提交消息后将 draftMessage 设置回空字符串：

<script>

    let draftMessage = '';

    let handleSendMessageClick = function(event){
        var message = event.target.form.querySelector('input').value
        previousMessages.push(message)
        previousMessages = previousMessages

        // Clear draftMessage
        console.log(`Clearing draftMessage - why doesn't this work?`)
        draftMessage = ''
    }

    let previousMessages = [];
</script>

<h1>Type some things</h1>

<form>
  <input value={draftMessage}/>
  <button on:click|preventDefault={handleSendMessageClick}>Send</button>
</form>

{#each previousMessages as message}
  <p>{message}</p>
{/each}

有个live demo here

如何更改点击处理程序中的绑定值？

Answer 1

你忘记了bind:，所以draftMessage的值实际上从未改变，所以draftMessage = ''没有效果。您有几个选择：

执行 <input bind:value={draftMessage}> 以便在您点击该行时，draftMessage 具有空字符串以外的值。（您现在可以使用该值而不是查询 DOM — previousMessages = [...previousMessages, draftMessage]）。 Demo here
完全跳过 draftMessage，并在整个过程中使用 DOM (input.value = '')。 Demo here

Svelte - 更改点击处理程序中的绑定值似乎不会更新它

Svelte - changing a bound value in a click handler doesn't seem to update it