动作用途：不更新

Question

当我尝试创建表单和带有表单逻辑的 js 文件时，我有一个 svelte 组件。我想使用操作来在表单中注册每个输入。挂载卸载正常，更新好像不行

代码： https://svelte.dev/repl/dd57165f12ce4029b905dcfcefb6e783?version=3.22.3

如有任何帮助，我们将不胜感激。

Answer 1

它不应该以这种方式工作...

return {
  update(value) {
    fields.update((n) => ({ ...n, [name]: value }))
  },
  destroy() {
    // ...
  },
}

注意文档和示例

An action can have parameters. If the returned value has an update method, it will be called whenever those parameters change, immediately after Svelte has applied updates to the markup.

<script>
    export let bar;

    function foo(node, bar) {
        // the node has been mounted in the DOM

        return {
            update(bar) {
                // the value of `bar` has changed
            },

            destroy() {
                // the node has been removed from the DOM
            }
        };
    }
</script>

<div use:foo={bar}></div>

bar 参数被传递给 foo 函数并绑定到元素，这意味着它已经是反应式的。在您的示例中，您正在传递值，这是在安装时采用的静态值，不会更新。

您可以将事件侦听器直接添加到注册函数中的 node

const onUpdate = (event) => {
    fields.update((n) => ({ ...n, [name]: event.target.value }))
}

node.addEventListener('change', onUpdate);

可能有一种 sveltier 方法来绑定值，这样您就可以使用更新函数，但是这个有效。

动作用途：不更新

action use: doesn't update

javascript

svelte

svelte-3