Cześć! Mam Component w React który generuje listę itemów. Każdy taki item ma button z funkcją onClick która aktualizuje stan w Reduxie, ale chciałbym również dodać funkcję która by dodawała animację po kliknięciu. Mój problem związany jest z zmianą kontekstu dla 'this', ponieważ w funkcji która odpowiada za animację 'this' zwraca cały Component, a nie konkretny button. Czy powinienem tutaj zrezygnować z użycia funkcji strzałkowej, czy może gdzieś użyć .bind? Wszelkie wskazówki mile widziane :) Pozdrawiam
class Fashion extends Component {
generateCards() {
const items = this.props.allProducts.fashion;
return items.map( item => {
const animateBuyButton = () => {
console.log(this)
}
return (
<div key={item.name} className="[ col-md-4 ]">
<div className="category-item">
<span className="category-item__name">
{item.name}
</span>
<img src={item.img} alt=""
className="img-fluid category-item__img"/>
<div className="category-item__price-tag">
{item.price}
</div>
<button onClick={
() => {
this.props.addProduct(item);
animateBuyButton();
}
} className="category-item__button"
>
+
</button>
</div>
</div>
)
})
};
render() {
return (
<div className="category-wrapper">
<div className="container">
<div className="row">
{this.generateCards()}
</div>
</div>
</div>
);
}
}