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

Question

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

在 HTML 中

在本机 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 中。因此，单击重置输入将清空所有字段，而不是将它们重置为初始值。这是 Svelte REPL 中的示例

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

Answer 1

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

您可以使用自定义操作强制设置属性。

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 代码以使用此操作可以使重置输入功能正确。