Как получить поведение контролируемых входов в Svelte? - PullRequest
Новая
       10

Как получить поведение контролируемых входов в Svelte?

0 голосов
/ 06 марта 2020

Как в Svelte получить поведение контролируемых входов (например, в React ).

Я пытался запретить поведение флажка по умолчанию при щелчке ввода (предотвращает установку HTML флажка в измените проверенный объект). 

<input 
  type=checkbox 
  bind:checked={done} 
  on:click|preventDefault={() => dispatch('change'}}
  />

Но, видимо, он делает что-то еще - и привязки svelte перестали работать.

Пробовал без bind:checked => просто checked={done} - результатов нет хорошо.

В конце я решил сделать одностороннее связывание через if: 

{#if done}
  <input type=checkbox checked readonly />
{:else}
  <input type=checkbox readonly />
{/if}

, но это выглядит неубедительно.

Какой правильный способ реализовать Controlled Inputs в Svelte?

Полный упрощенный пример вы можете найти здесь: https://svelte.dev/repl/ecc812d1be34464185739f02ca2421cd?version=3.19.2

Ответы [ 2 ]

1 голос
/ 06 марта 2020

Один из способов сделать это - отключить события указателя для флажка и зарегистрировать событие щелчка на элементе-обертке, который обрабатывает это. 

<style>
    input {
        pointer-events: none;
    }
</style>

<label on:click|preventDefault={handleClick} on:keydown|preventDefault={handleClick}>
    <span>[current: {done}]</span>
    <input type="checkbox" checked={done}>
</label>

(я добавил обработчик нажатия клавиш, чтобы вы могли по-прежнему переключать флажок с клавиатуры также)

0 голосов
/ 06 марта 2020

Если вы связываетесь со значением с помощью bind:checked={done}, вы явно просите, чтобы внутреннее значение флажка было отражено в переменной done, так что это, похоже, противоположно тому, что вы спрашиваете.

Для меня preventDefault похоже на способ go, если вы хотите предотвратить поведение ввода по умолчанию: 

<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher()

    export let done;

    const handleClick = () => {
        dispatch('change');
    }

    const noop = () => {}
</script>

<div class="root" on:click={handleClick}>
    <label>


        <input type=checkbox checked={done} on:click|preventDefault={noop} />


        <slot></slot> [current: {done}]
    </label>
</div>

Обновлен REPL

Может быть, более краткая, старая школа, альтернатива могла бы быть такой (обратите внимание, onclick, а не on:click): 

<input type=checkbox checked={done} onclick="return false" />

В контексте Svelte некоторые могут съежиться и назвать это Кодовый запах, хотя ... Но мне кажется, это нормально.

...