: selected state on looped react Komponente

Question

Ich möchte grundsätzlich einzelne ausgewählte Zustände auf Divs machen, die ich in einer Schleife rendere. Ich kann nur eine Möglichkeit sehen, die Farbe aller gerenderten Divs zu ändern, aber ich möchte die Farbe ändern, auf die geklickt wurde. Unten ist der Code für die Schleife.

renderSports() { 
    const {sports} = this.props 
    return sports.valueSeq().map(sport => this.renderActualSports(sport)) 
    }, 

    renderActualSports(sport) { 
    const {sportCount} = this.props 
    return (
     <div className="sportSeparator"> 
     {sport} {this.renderCount(sportCount.get(sport))} 
     </div> 
    ) 
    }, 

Dies wird im Grunde nur eine Liste von einigen Sportarten wiedergeben. Ich möchte die Farbe einer ausgewählten Sportart beim Klick ändern.

Answer 1

Sie müssen die Elemente, auf die geklickt wurde, in Ihrem Komponentenstatus speichern.

Angenommen, Sie würden speichern diese Elemente hervorgehoben in this.state.highlighted und dass Ihre Sport Variable ein String oder Nummer lautet:

renderActualSports(sport) { 
    const {sportCount} = this.props 
    return (
     <div 
     className="sportSeparator" 
     onClick={this.highlight(sport)} 
     style={{color: this.state.highlighted.indexOf(sport) > -1 && 'red' : ''}} 
     > 
     {sport} {this.renderCount(sportCount.get(sport))} 
     </div> 
    ) 
    }, 

    highlight(sport) { 
    return() => { 
     this.setState({highlighted: [...this.state.highlighted, sport]}); 
    } 
    } 

Also, was Sie tun, ist onClick auf dem div Sie, dass der Sport in die this.state.highlighted Array hinzufügen und wenn die Liste angezeigt wird. Sie überprüfen, ob dieser Sport im Array ist und wenn ja, ändern Sie die Farbe mit einem Inline-Stil