Svelte - изменение связанного значения в обработчике кликов не приводит к его обновлению - PullRequest
Новая
       14

Svelte - изменение связанного значения в обработчике кликов не приводит к его обновлению

0 голосов
/ 16 мая 2019

У меня есть простое демонстрационное приложение , связывающее ввод с помощью Svelte . Это работает, но во время обработки нажатия на этот же элемент я хочу сбросить значение привязки.

enter image description here

В частности, я связал 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}

Здесь есть живая демонстрация

Как изменить связанное значение в обработчике кликов?

1 Ответ

1 голос
/ 16 мая 2019

Вы забыли bind:, поэтому значение draftMessage фактически никогда не меняется, поэтому draftMessage = '' не имеет никакого эффекта. У вас есть несколько вариантов:

  1. Выполните <input bind:value={draftMessage}>, чтобы к тому моменту, когда вы нажмете эту строку, draftMessage будет иметь значение, отличное от пустой строки. (Теперь вы можете использовать это значение вместо запроса DOM - previousMessages = [...previousMessages, draftMessage]). Демо здесь
  2. Пропустите draftMessage полностью и используйте DOM повсюду (input.value = ''). Демо здесь
...