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

Question

我有一个使用 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}

这里有一个现场演示

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

标签： svelte

Answer 1

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

1. 这样做<input bind:value={draftMessage}>，当您点击该行时，draftMessage它的值不是空字符串。（您现在可以使用该值而不是查询 DOM — previousMessages = [...previousMessages, draftMessage]）。演示在这里
2. 完全跳过draftMessage，并在整个过程中使用 DOM ( input.value = '')。演示在这里