在 Svelte 中获取受控输入行为的方法是什么

Question

在 Svelte 中获取受控输入行为的方式是什么（如 in 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}

但这看起来很蹩脚。

在 Svelte 中实现 Controlled Inputs 的正确方法是什么？

您可以在这里找到完整的简化示例： https://svelte.dev/repl/ecc812d1be34464185739f02ca2421cd?version=3.19.2

Answer 1

实现此目的的一种方法是关闭复选框的指针事件，并在处理此事件的包装元素上注册点击事件。

<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>

（我添加了按键处理程序，因此您仍然可以使用键盘切换复选框）

Answer 2

如果您使用 bind:checked={done} 绑定到值，您明确要求将复选框的内部值反映到 done 变量，所以它似乎与什么相反你在问。

对我来说，preventDefault 似乎是要防止默认输入行为的方法：

<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>

Updated REPL

也许更简洁、老派的替代方案可能是这个（注意，onclick，而不是 on:click）：

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

在 Svelte 的背景下，有些人可能会对此感到畏缩并称其为代码味道，但...但我觉得还可以。

在 Svelte 中获取受控输入行为的方法是什么

What is the way to get the Controlled Inputs behaviour in Svelte

svelte