html - 如何在 Svelte 中强制内联 html 属性

Question

我想使用浏览器的 native 支持将表单的所有字段值重置为其默认或初始状态，使用 <input type"reset">元素。

在 HTML 中

在 native HTML 中，单击重置输入将删除所有用户输入并将字段重置为值内联参数中设置的任何值: value='default value' ，如果它为空或丢失，它将重置为空字段。

input{
  display:block;
  margin:10px;
}

<form>
  <input type="text" value="default value">
  <input type="text" value="">
  <input type="text">
  <input type="reset">
  
</form>

简洁

在 Svelte 中，value 属性似乎永远不会打印在 html 中。因此，单击重置输入将清空所有字段，而不是将它们重置为初始值。 Here's an example in Svelte REPL

那么有没有一种方法可以强制 native 行为而不用 javascript 处理它？有没有办法强制 svelte 打印内联属性并且从不更新它？

Answer 1

据我所知，Svelte 没有内置方法来强制设置属性而不是属性。如果您查看 REPL 中生成的代码，它总是在使用 value="something" 时设置 value 属性。

您可以使用自定义 action 强制设置属性.

function valueAttr(node, val) {
    node.setAttribute('value', val);

    return {
        update: function(val) {
            node.setAttribute('value', val);
        }
    }
}

请参阅下文了解如何将操作应用于输入元素。您将使用此操作，而不是在模板中设置 value="something"。当元素被安装时，该函数将运行并设置元素的 value 属性。 update 函数是可选的，但当传递给它的值发生变化时，它会重新设置 value 属性。

<script>
    let dvalue = 'default value';
    
    function valueAttr(node, val) {
        // see definition above
    }
</script>
<form>
    <input type="text" use:valueAttr={dvalue}>
    <input type="text" use:valueAttr={"default value"}>
    <input type="text">
    <input type="reset">    
</form>

更新您的 REPL 代码以使用此操作可以正确重置输入功能。