svelte-3 - 当 react 值是引用类型时，Svelte 输入绑定(bind)会中断？

Question

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

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

我在尝试将文本输入绑定(bind)到 react 值时遇到了问题。

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

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

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

第一个组件传递了两个字符串值(“one”和“two”):

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

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

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

$: value = selectedValue

输入字段绑定(bind)到这个 react 值:

<input type="text" bind:value>

因此单击“一”按钮将输入文本设置为“一”，单击“二”按钮将输入字段设置为“二”。

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

第二个组件传递了两个数组值:

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

再次单击按钮设置 selectedValue到其中之一。

然而，这一次 react 声明依赖于一个数组元素:

$: value = selectedValue[1]

一切正常，除了现在 您根本无法在输入字段中输入 .

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

$: value = aString

对比

$: value = anArray[x]

Answer 1

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

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

即代替这个:

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

用这个:

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