Я понимаю, что мой другой ответ как бы пропускает вопрос о том, как onClickRemove узнать , какой элемент удаляется, когда вы зацикливаетесь на своих элементах. Есть три способа сделать это:
1. Передать анонимную функцию с переданным аргументом (или связать аргумент)
<RemoveButton onClick={() => this.onClickRemove(item)}>
// or: <RemoveButton onClick={this.onClickRemove.bind(this, item)}>
Это может прийти с довольно незначительным ударом производительности .
2. Используйте curry - функция, которая принимает ваш аргумент и возвращает другую функцию
Итак, в onClick вы фактически вызываете метод:
<RemoveButton onClick={this.onClickRemove(item)}>
И этот метод является функцией, которая принимает элемент, а затем возвращает еще одну функцию, которая обрабатывает его удаление:
onClickRemove = (item) => () => { /* do something with `item` */ }
Это позволяет избежать снижения производительности, которое имеет вариант 1. Но, честно говоря, я никогда не видел его в дикой природе. только в качестве примера. Возможно, люди не знают или не заботятся о снижении производительности, или просто находят этот синтаксис менее привлекательным, или просто не думают об этом.
3. (рекомендуется) Избегайте ситуации вообще, вместо этого создавая новый компонент в каждом цикле (который принимает элемент в качестве опоры)
Вот что библиотека React ESLint рекомендует , и мы сделали с:
{inCart.map(productId => (
<CartRow
key={productId}
products={products}
productId={productId}
removeCallback={this.removeCallback}
/>
))}
Теперь, когда это собственный компонент, ваш <CartRow /> компонент может делать <RemoveButton onClick={this.removeOnClick} /> с методом removeOnClick:
removeOnClick = removedId => this.props.removeCallback(this.props.productId);
Поскольку вы передали только этому продукту, мы можем в этом методе жестко указать, какой продукт мы удаляем. (Возможно, это просто хорошее место, чтобы разбить ваши компоненты.)