时间戳

首页 > 解决方案 > 从 React 中的数组中删除具有唯一 ID 的项目

javascript - 从 React 中的数组中删除具有唯一 ID 的项目

问题描述

我是一个新手，并试图通过单击一个按钮从数组中删除一个项目。但是，我无法检索我想要的 id。我能从 e.target 得到的只是“输入”本身，而不是整个项目，更不用说 id。

//some other stuff

  deleteDrink = (event) => {
    console.log(event.target)
  }

return(
//blahblahblah[enter image description here][1]
orders.map((order, i) => (
            <Order
              key={orders[i].id}
              drink={orders[i].drink}
              price={orders[i].price}
              quantities={orders[i].number}
              note={orders[i].note}
              deleteDrink={this.deleteDrink}
            />
    ) ```

When I clicked the button, all I can get is:
<input class="delete-button br4 w-10 grow" type="button" value="Delete"></input>

what should I do to retrieve the id?


  [1]: https://i.stack.imgur.com/KM7Ng.jpg

标签： javascriptreactjs

解决方案

不要将处理程序设置为 ，而是this.deleteDrink设置一个处理程序，该处理程序使用要删除的元素的 ID（或索引）进行调用： deleteDrink

deleteDrink={() => { this.deleteDrink(order.id); }}

deleteDrink = (id) => {
  console.log('deleting', id)
}

要删除特定的order何时deleteDrink被调用，也许你想要这样的东西：

deleteDrink={() => { this.deleteDrink(i); }}

// Example if you're using hooks:
deleteDrink = (i) => {
  setOrders([
    ...orders.slice(0, i),
    ...orders.slice(i + 1)
  ]);
}

推荐阅读