当反应值是引用类型时，Svelte 输入绑定会中断？

Question

（我是 Svelte 的新手，所以我很可能在这里做错了）

更新：我添加了第二个稍微不同的 REPL，它可以更好地证明问题。试试这个：https://svelte.dev/repl/ad7a65894f8440ad9081102946472544?version=3.20.1

---

我在尝试将文本输入绑定到反应值时遇到了问题。

我正在努力用文字来描述这个问题，所以希望在随附的 REPL 中对该问题进行简化的演示会更有意义。

https://svelte.dev/repl/6c8068ed4cc048919f71d87f9d020696?version=3.20.1

该演示在一个页面上包含两个自定义<Selector> 组件。

---

第一个组件被传递了两个字符串值（“one”和“two”）：

<Selector valueOne="one" valueTwo="two"/>

单击输入字段旁边的按钮将selectedValue 设置为这些值之一。

这反过来又会触发以下响应式声明进行更新：

$: value = selectedValue

输入字段绑定到这个反应值：

<input type="text" bind:value>

所以点击“一”按钮将输入文本设置为“一”，点击“二”按钮将输入字段设置为“二”。

重要的是，您仍然可以在输入字段中输入任何内容。

---

第二个组件被传递了两个数组值：

<Selector valueOne={[1, "one"]} valueTwo={[2, "two"]}/>

同样，单击按钮将selectedValue 设置为其中之一。

不过这次反应式声明依赖于一个数组元素：

$: value = selectedValue[1]

一切都和以前一样，除了现在您根本无法再在输入字段中输入内容。

所以问题是 - 为什么<input bind:value> 对这两者的行为不同：

$: value = aString

对

$: value = anArray[x]

Answer 1

这似乎只是使用双向绑定时的问题。

通过切换到单向和 on:input 处理程序，问题就消失了：

即而不是这个：

<input type="text" bind:value={valX}/>

使用这个：

<input type="text" value={valX} on:input={e => valX = e.target.value}/>

Answer 2

我很确定您的响应式声明会在您的绑定值发生更改时立即覆盖它，即输入上的每一次击键和每一次按下按钮。这意味着它在技术上是有效的，你只是在每次它改变时恢复它。查看使用观察者的this version。

还绑定到响应式声明意味着您实际上永远不会使用输入更改变量（您可以在输入输入时在第一个选择器上的 JSON 结果中看到该值不会仅在按钮单击时更新)。

为什么不丢失响应式声明并直接绑定到您想要的变量。然后使用{#if} 块根据index 的真实性在您显示的输入版本之间切换？

<script>
    export let valueOne;
    export let valueTwo;
    export let index;

    let selectedValue = index? [] : '';
    let selectValue = (val) => selectedValue = val;
</script>
{#if index}
    <input type="text" bind:value={selectedValue[index]} placeholder="Type anything...">
{:else}
    <input type="text" bind:value={selectedValue} placeholder="Type anything...">
{/if}
<button on:click={() => selectValue(valueOne)}>One</button>
<button on:click={() => selectValue(valueTwo)}>Two</button>
<p>
    <strong>Selected value:</strong> {JSON.stringify(selectedValue)}
</p>

通过直接绑定到 selectedValue 或其索引，您可以获得使用输入更改值的额外好处。这是REPL中的一个工作示例