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，并在整个（input.value = ''）中使用DOM。 Demo here

苗条-更改点击处理程序中的绑定值似乎无法对其进行更新

1 个答案: