如何在 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 中。因此，单击重置输入将清空每个字段，而不是将它们重置为初始值。 Here's an example in Svelte REPL

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

Answer 1

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

您可以使用自定义 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 代码以使用此操作可使重置输入正常运行。

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

How to force inline html attribute in Svelte

html

forms

input

reset

svelte

在HTML

苗条