：循环反应组件上的选定状态

Question

我基本上想要在循环中呈现div的单个选定状态。我只能看到一种方法来改变所有渲染的div的颜色，但是我希望改变被点击的颜色。以下是循环的代码。

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

这将基本上只是呈现一些体育列表。我想在点击时改变所选运动的颜色。

Answer 1

您将需要存储在组件状态下点击的项目。

假设你将存储这突出显示的项目中this.state.highlighted和你的运动变量是一个字符串或数字：

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

所以，你在做什么是的onClick的DIV您体育运动添加到this.state.highlighted阵列和当显示列表时。你检查这项运动是否在阵列中，如果是的话，你使用内联风格改变颜色