如何正确在 Svelte 中动态添加和删除文本输入字段？答案

【问题标题】：How to dynamically add and remove text input fields in Svelte correctly?如何正确在 Svelte 中动态添加和删除文本输入字段？
【发布时间】：2022-09-25 18:37:04
【问题描述】：

我是 Svelte 和 Web 开发的新手，我希望你能指出我正确的方向。

当前代码属于一个苗条的组件。如图所示：https://svelte.dev/repl/f0e5c30117724ec38b7d19781d2c4de6?version=3.48.0

它应该默认显示一个文本字段，同时允许在动态添加的按钮上添加和删除一个附加文本字段。目前，此代码可以动态添加文本字段，但是不能在单击按钮时动态删除文本字段。

我相信 GetDynamicElement 函数可能有错误。但是，我不确定具体在哪里。有什么建议么？

p.s.我知道这里的答案很接近，但我认为它们不适用于这种情况，尤其是在 Svelte 上。

<script>
  var num_links = 1;
  let container;

  const GetDynamicElement = (value) => {
    return (
      \'<input name = \"DynamicField\" type=\"text\" size =111  id =link  placeholder=\"Enter Next link! \" value =  \"\' +
      value +
      \'\" />\' +
      \'<input type=\"button\" value=\"Remove\" on:click = {RemoveField(this)}>\'
      // \"RemoveSuggestionCart(this)\" />\'
    );
  };

  const addField = () => {
    if (num_links < 2) {
      console.log(\"addField\");
      const div = document.createElement(\"DIV\");
      div.innerHTML = GetDynamicElement(\"\");
      container.appendChild(div); // Append timetable space
      num_links += 1;
    }
  };

  //Removes the entire division inclusive of it\'s text field.
  const RemoveField = (div) => {
    console.log(\"RemoveField\");
    div.removeChild(div.parentNode);
    num_links -= 1;
  };
</script>



<div>
  <input
    name=\"DynamicField\"
    type=\"text\"
    size=\"121\"
    id=\"link\"
    placeholder=\"Enter First Link!\"
  />
  <div bind:this={container} />
</div>

<button on:click|preventDefault={addField}>[+ add timetable link]</button>

<style>
</style>

你能提供一个游乐场链接吗？
svelte.dev/repl/f0e5c30117724ec38b7d19781d2c4de6?version=3.48.0这是链接！提前致谢！
您绝对不应该从 JS 中的字符串构建 HTML。 Svelte 的存在就是为了防止这种情况以及随之而来的安全问题。

标签： javascript html input textfield svelte

【解决方案1】：

您可以使用 num_link 和 svelte 的 #each 使用 svelte 创建输入：

{#each Array(num_links) as _, i}
<div>
  <input
    name="DynamicField"
    type="text"
    size="121"
    id={`link_${i}`}
    placeholder="Enter First Link!"
  />
</div>
{/each}

工作示例：https://svelte.dev/repl/04169e030b6944258cfd07af15873b48?version=3.48.0

【讨论】：

（如果数据不直接作为表单的一部分发送，num_links 应该替换为一个适当的数组，该数组也保存输入到字段中的数据。可以使用 bind:value 同步字段。否则你再次以 JS 中不必要的 DOM 访问结束。）
@HB你介意展示有效的解决方案吗？
@KasparL.Palgi 查看this official example。

【解决方案2】：

添加/删除字段并有一个按钮来记录或发送到端点或任何带有“记录”按钮的东西。

<script>
// to display one empty inputs before clicking add needed
let values=[{
   "url": "",
   "name": "",
}]; 
    
const addField = () => {
   values = [...values, {url: '', name: ''}]
};
    
const removeField = () => {
   values = values.slice(0, values.length-1)
};
</script>
    
{#each values as v, i}
   <div>
      <input id={i} type="text" bind:value={values[i].url} placeholder="url"/>
      <input id={i} type="text" bind:value={values[i].name} placeholder="name"/>
   </div>
{/each}

{#if values.length >= 2} {/如果}

<button on:click|preventDefault={addField}>添加 <button on:click={() => console.log(values)}>记录我

试试：https://svelte.dev/repl/2441993f8d9946aa894bf07a8a8f9b4f

编辑：感谢@Corrl - 编辑得更好。

【讨论】：

最好在您的答案中包含一个简单版本的代码，而不仅仅是指向 Repl 的链接
感谢您的建议。我会在再次使用 PC 时进行更改。