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

Question

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

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

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

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

该演示在一个页面上包含两个自定义<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}/>