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

所以你正在做的是点击你将该运动添加到this.state.highlighted数组并显示列表的div。检查该运动是否在阵列中，如果是，则使用内联样式更改颜色

：在循环反应组件上选择状态

1 个答案: