Question

当我尝试创建表单以及具有表单逻辑的js文件时，我的组件很苗条。我想使用动作来在表单内注册每个输入。挂载和卸载工作正常，但是更新似乎不起作用。

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

任何帮助将不胜感激。

Answer 1

这不是要这样工作...

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

请注意文档和示例

动作可以具有参数。如果返回的值具有update方法，则在Svelte将更新应用于标记之后，只要这些参数发生更改，就会立即调用它。

<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 绑定值的方法，该方法随后将允许您使用更新功能，但这是可行的。

动作用途：不会更新

1 个答案: