Zmiana kontekstu dla this korzystając z React JSX

Question

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>
        );
    }
}

 

Comments

Nie znam Reacta, więc nie podam gotowej odpowiedzi. Sprawdź w konsoli, czym będzie this, gdy użyjesz zwykłej funkcji (nie strzałkowej).

---

kiedy zmieniam funkcję strzałkową na zwykłą, wtedy console.log wyświetla undefined.

 

        return items.map( item => {
            function 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>
            )
        })

 

---

Miałem na myśli funkcję, którą przekazujesz do onClick, nie animateBuyButton :)

---

Wtedy zmienia się kontekst dla :

this.props.addProduct(item);

a to crashuje React'a

---

Okej, ale pokaż na co teraz wskazuje this (rozwiń go w konsoli i pokaż screen).

---

Przy użyciu kodu : 

    generateCards() {
        const items = this.props.allProducts.fashion;
        return items.map( item => {

            const animateBuyButton = function() {
                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={function() {
                            // this.props.addProduct(item);
                            animateBuyButton();
                        }
                        } className="category-item__button"
                        >
                            +
                        </button>
                    </div>
                </div>
            )
        })
    };

konsola nadal pokazuje undefined

---

Potrzebuję, żebyś pokazał this z wnętrza funkcji podpiętej do onClick, czyli:

<button onClick={function() {
    console.log('this:', this);
}
} className="category-item__button"
>
    +
</button>

Nie istotna jest teraz funkcja animateBuyButton.

---

Ohh... okej :D

A więc przy użyciu zwykłej funkcji, konsola zwraca 'this undefined'.

A przy zastosowaniu funkcji strzałkowej zwraca 'this Fashion {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}'

---

Mhmm, możesz zrobić screena z konsoli po rozwinięciu pól kontekstu Fashion? 

---

Wygląda to tak : 

Answer 1

Gapa ze mnie. Przecież do handlera przekazywany jest event, więc wewnątrz możesz dobrać się do przycisku przez event.target:

<button onClick={
    (event) => {
        this.props.addProduct(item);
        animateBuyButton(event.target); // event.target to powinien być kliknięty przycisk
    }
} className="category-item__button"
>
    +
</button>

 

Comments

bang! :) To jest to! Dzięki Ci wielkie, mam tę podstronę otwartą, ale chyba kłania się czytanie dokumentacji ze zrozumieniem :P