使用 svelte 将单选组绑定到布尔值答案

【问题标题】：Bind radio group to a boolean value using svelte使用 svelte 将单选组绑定到布尔值
【发布时间】：2022-03-12 03:41:53
【问题描述】：

我想创建一个纤细的组件，它导出一个可绑定的布尔值并表示单选按钮组的状态，如以下代码：

<script lang="ts">
    export let firstSelected = true;
</script>

<input type="radio" bind:group={firstSelected} value={true}/>
<input type="radio" bind:group={firstSelected} value={false}/>

问题在于svelte-check 发出错误：

Error: Type 'true' is not assignable to type 'string | number | string[]'. (ts)
Error: Type 'false' is not assignable to type 'string | number | string[]'. (ts)

一种可能的解决方法是使用数字而不是布尔值，但这会改变组件的界面：

<script lang="ts">
    export let firstSelected = 1;
</script>

<input type="radio" bind:group={firstSelected} value={1}/>
<input type="radio" bind:group={firstSelected} value={0}/>

有没有办法解决这个问题，同时仍然公开可绑定的布尔值？如果没有，有没有办法忽略这个错误？

REPL 示例：https://svelte.dev/repl/b6e9042a1b594f2bb77b1e8e7b38ffe1?version=3.31.2

【问题讨论】：

标签： typescript svelte

【解决方案1】：

将另一个数字变量与反应性声明和on:change 处理程序一起使用可以解决问题：

<script lang="ts">
    export let firstSelected = true;
    
    $: _firstSelected = Number(firstSelected);
    
    function handleChange(e) {
        firstSelected = Boolean(_firstSelected);
    }
</script>

<input type="radio" bind:group={_firstSelected} value={1} on:change={handleChange}/>
<input type="radio" bind:group={_firstSelected} value={0} on:change={handleChange}/>

REPL

【讨论】：

【解决方案2】：

这是 Svelte 工具的一种过于严格的类型，在最新版本的 Svelte for VS Code (105.9.0) 和 svelte-check (2.2.12) 中放松了这一点。

【讨论】：

【解决方案3】：

您可以使用数字，例如：

<script lang="ts">
    export let firstSelected = true;
    
    let group
    
    $: group = firstSelected ? 1 : 0
</script>

<input type="radio" bind:group={group} value={1}/>
<input type="radio" bind:group={group} value={0}/>

【讨论】：

这个问题是它不能作为双向绑定！单击单选按钮时，firstSelected 不会更新。
但是添加一个on:change 函数，从group 更新firstSelected 的输入似乎有效。

【解决方案4】：

这里肯定有一个错误，因为绑定没有转换为布尔值。作为快速修复：

<input type=checkbox on:change={myvar = (myvar === true) ? false : true}>

【讨论】：