[React] Zdarzenie 'click' na komponencie

Question

Próbuje wywołać funkcje po kliknięciu w dany komponent:

    closePopup = () => {
        alert('test')
    }
    openPopup = () => {
     this.setState({
      popup: true
     })

    render(){
            return (
                <React.Fragment>
                    <div className="product" onClick={this.openPopup}>
                        <img alt={this.state.item.name} className="product__img" src={this.state.item.image_url} />
                        <h3 className="product__title">{this.state.item.name}</h3>
                        <p className="product__tagline">{this.state.item.tagline}</p>
                    </div>

                    <Popup item={this.state.item} onClick={this.closePopup}/>
                </React.Fragment>
            )
    }

Natomiast po kliknięciu we wskazany element nie następuje wywołanie. Sam komponent się pokazuje po kliknięciu w box.

Comments

Jesteś pewien, że nie masz błędów składniowych (sprawdź w konsoli)? Nie pokazałeś całego skryptu, ale na oko wymieszałeś składnię przypisywania funkcji/metod do klasy/obiektu oraz brakuje Ci zamykającej klamry przy tworzeniu openPopup.

---

Błędów składniowych brak. Dla pewności przypisałem onClick do metody, która jest odpowiedzialna za otwieranie popupu. Również nie reaguje na klik.

Answer 1

Trochę nie jasno opisałeś problem, ale z tego co rozumiem, to chcesz wywołać inną funkcję po kliknięciu w komponent? Z tego co kojarzę to setState może mieć callbakck. Np.

openPopup = () => {
    /* tu możesz wstawić i uruchomić inną funkcję
    np. coś obliczyć i dopiero wstawić potem wstawić do state, np. */
    foo();
    this.setState({
      popup: true
     },()=>{
    /* albo tu możesz wstawić też funkcję, która
    uruchomi się po ustawieniu state, np. */
    bar();
});