如何为锚标签的on:click回调绑定值？侧边栏激活状态更新疑问

在Svelte里给点击事件传递参数其实很简单，不用复杂的bind指令，直接用箭头函数包裹你的回调就行。我给你调整一下代码，完美实现你要的激活状态更新：

首先是完整的Svelte组件代码：

<script>
  // 侧边栏项数据
  let items = [
    { text: "Home", url: "/" },
    { text: "Workarea", url: "/workarea" },
    { text: "Notes", url: "/notes" },
    { text: "Conf", url: "/conf" }
  ];
  // 跟踪当前激活的项，默认激活第一个
  let activeItem = items[0];

  // 点击回调，接收当前项和事件对象
  function onItemClick(item, e) {
    // 阻止默认跳转行为
    e.preventDefault();
    // 更新激活项
    activeItem = item;
    // 如果需要路由跳转，这里可以加对应的逻辑，比如使用svelte-router的push方法
  }
</script>

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    {#each items as item}
      <li class="list-group-item">
        <a
          <!-- 用箭头函数包裹，传递当前item和事件 -->
          on:click={(e) => onItemClick(item, e)}
          href={item.url}
          <!-- Svelte的语法糖，当条件满足时自动添加active类 -->
          class:active={activeItem === item}
        >
          {item.text}
        </a>
      </li>
    {/each}
  </ul>
</div>

<style>
  /* 自定义激活状态的样式 */
  .active {
    color: #0d6efd;
    font-weight: bold;
    text-decoration: none;
  }
</style>

关键要点说明： #

• 传递参数到回调：通过on:click={(e) => onItemClick(item, e)}这种箭头函数的方式，把当前循环的item和事件对象e一起传给处理函数，这样你就能在函数里拿到点击的具体项了。
• 跟踪激活状态：用activeItem变量存储当前激活的项，点击时直接赋值更新，Svelte会自动响应这个变化，更新DOM。
• 高亮激活项：使用Svelte的class:active={条件}语法，当activeItem等于当前item时，自动给<a>标签加上active类，再配合CSS就能实现高亮效果。

如果你不需要事件对象（比如不需要阻止默认跳转），可以简化成on:click={() => onItemClick(item)}，函数里就不用接收e参数了。

内容的提问来源于stack exchange，提问作者ivan quintero