Svelte Flowbite：{#each}块中下拉框选中后无法关闭的处理方案

针对你遇到的点击DropdownItem后下拉框无法自动关闭，且不想维护额外open状态数组的问题，可以通过获取Flowbite Dropdown组件实例并调用内置关闭方法来解决，具体实现如下：

核心思路 #

利用Svelte的bind:this语法获取每个动态生成的Dropdown组件实例，在点击选项时调用实例的hide()方法直接关闭下拉框，无需手动维护每个下拉框的open状态。

修改后的完整代码 #

<script>
  let validValues = [
    { key: 'key1',value:'value1'},
    { key: 'key2',value:'value2'},
    { key: 'key3',value:'value3'}
  ];
  let properties = [];
  // 存储每个下拉框的实例，仅用于调用关闭方法，无需维护状态
  let dropdownInstances = [];

  function addProperty(){
    properties = [...properties, {id: '', key: '', value: ''}];
    // 同步新增实例占位符
    dropdownInstances = [...dropdownInstances, null];
  }

  function removeProperty(i){
    properties.splice(i, 1);
    properties = [...properties];
    // 同步移除对应实例
    dropdownInstances.splice(i, 1);
    dropdownInstances = [...dropdownInstances];
  };

  function selectKey(i, value) {
    // 更新选中的key值
    properties[i].key = value;
    // 调用下拉框实例的hide方法关闭弹窗
    if (dropdownInstances[i]) {
      dropdownInstances[i].hide();
    }
  }
</script>

<main>
  <button on:click={addProperty}>Add new row</button>

  {#each properties as prop, i}
    <button id={`button${i}`} type="button">
      <div>{prop.key || 'Select Key'}</div>
    </button>
    <!-- 绑定实例到数组 -->
    <Dropdown triggeredBy={`#button${i}`} bind:this={dropdownInstances[i]}>
      {#each validValues as option}
        <!-- 调用统一的选择方法，同时关闭下拉框 -->
        <DropdownItem on:click={() => selectKey(i, option.value)}>
          {option.value}
        </DropdownItem>
      {/each}
    </Dropdown>
    <Input type="text" bind:value={prop.value} placeholder="Enter value" />
    <button on:click={() => removeProperty(i)}>Remove</button>
  {/each}
</main>

关键改动说明 #

1. 新增实例数组：dropdownInstances用于存储每个动态生成的Dropdown组件实例，新增或删除行时同步更新数组长度，无需维护open状态。
2. 绑定组件实例：通过bind:this={dropdownInstances[i]}将每个Dropdown实例绑定到数组对应位置。
3. 统一处理选择逻辑：封装selectKey方法，既更新properties中的key值，又调用实例的hide()方法关闭下拉框。

这种方式完全符合Flowbite组件的设计逻辑，避免了手动维护大量状态变量，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Csaba Toth