从React中的数组中删除具有唯一id的项

Question

我是一个新手，正试图通过单击按钮从数组中删除一个项目。但是，我无法检索到我想要的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

Answer 1

与其将处理程序设置为this.deleteDrink，不如设置一个处理程序，该处理程序用要删除的元素的ID(或索引(调用deleteDrink：

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

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

要在调用deleteDrink时删除特定的order，也许您需要这样的东西：

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

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