Question

将参数传递给细长按钮单击处理程序的推荐方法是什么？

用例是每个列表内的重复按钮。据我所知，文档仅显示了如何处理单个按钮的示例，您可以在其中使用全局变量来传递数据。如果要在网格中冲压出按钮列表，则不可行。

示例：

{#each comments as c}
    <div class="comment-block">

    <div class="comment"> {c.text} </div>
    <!-- How can I pass c.id to the  approveComment handler? -->
    <button on:click="{approveComment}">Approve</button>
    </div>
{/each}

<script>
function approveComment() {
  // how can I pass an id to this method
}
</script>

一种解决方案是将each块的内容移到另一个组件中，并将注释对象作为prop传递，但是我很好奇是否可以在每次迭代中通过以下方式将输入值绑定到按钮处理程序：循环。

Answer 1

函数approveComment将事件作为参数。将函数声明更改为：

function approveComment(event) {
  // now you can access event.target where you can store 
  // the id from your button, e.g.:
  const id = event.target.value;
  console.log(id);
}

您还需要在按钮的value属性中声明c.id：

<button on:click={approveComment} value={c.id}>Approve</button>

带参数的按钮单击处理程序

1 个答案: