1

Por alguma razão, a função onClick pertencente a cada uma das imagens não está a funcionar corretamente... "index" deveria ser o indice da própria imagem, mas o React age como que todas as imagens tivessem sido clicadas. Alguém me consegue ajudar?

hanldeClick(index){  
    var x;
    const newGames = this.state.games.slice();
    if(this.state.games[index].selected) {
        newGames[index].selected = false;
        x = -1;
    }
    else {
        newGames[index].selected = true;
        x = 1;
    }
    this.setState({games: newGames, selected: this.state.selected + x});
}   
renderGames(){
    var arr = [];
    const res = [];
    const len = this.state.games.length;
    var index = 0; 
    for(let i=0; i<Math.ceil(len/3); i++){
        for(let j=0; j<3; j++){
            if(index>=len)
                break;
            var style = this.state.games[index].selected ? "active" : "inactive";
            arr.push(
                <Col key={index}>
                    <img
                        onClick={()=>{this.hanldeClick(index)}}
                        className={style} 
                        src={this.state.games[index].image}
                        alt={this.state.games[index].description}
                    />
                </Col>
            );
            index++;
        }
        if(index<=len){
            res.push(<Row key={i} className='margin'>{arr}</Row>);
            arr = [];
        }
    }
    return res;
}

1 Resposta 1

0

O problema aqui, e semelhante ao que foi perguntado aqui, é que quando o onClick for chamado o valor do index é outro que o que tinha na iteração do loop que criou esse componente...

Podes usar o .bind para criar uma função que guarda os argumentos em memória para quando fôr chamada. Ou declarar variáveis locais.

Exemplo:

Em vez de

onClick={()=>{this.hanldeClick(index)}}  

usa

onClick={this.hanldeClick.bind(this, index)}

Ou:

const i = index;
arr.push(
    <Col key={i}>
        <img
            onClick={()=>{this.hanldeClick(i)}}
            className={style} 
            src={this.state.games[i].image}
            alt={this.state.games[i].description}
        />
    </Col>
);
1
  • Muito obrigado! Funcionou :D
    – Simmy
    Commented 26/04/2019 às 15:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .