如何处理来自同一数组的多个对象的 onClick

Question

我遇到了一些问题，并且有点生气。我想 .map 我的对象数组。并使每个人都可以点击。单击后，我希望特定对象仅显示其头像：

const stations = [
  {
    name: 'first',
    avatar: './img/1.jpg'
  },
  {
    name: 'second',
    avatar: './img/2.jpg'
  },
  {
    name: 'third',
    avatar: './img/3.jpg'
  },
  {
    name: 'fourth',
    avatar: './img/4.jpg'
  },
  {
    name: 'fifth',
    avatar: './img/5.jpg'
  }
]

现在。我可以从我的数据库数组中访问我需要的值。但！我有一个问题：

this.state = {
      clicked: false
    }
    this.handleClick = this.handleClick.bind(this)
}

我的对象没有单独的状态。因此，当我想基于 this.state 创建一些操作（例如隐藏和显示）时，它始终适用于每个元素。

我的代码以某种方式工作。当我呈现列表并单击任何按钮时，每个按钮都会发生操作：

class radiosList extends React.Component {
  constructor() {
    super();
    this.state = {
      clicked: false
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(station) {
    console.log(this)
    this.setState({ clicked: !this.state.clicked })

  }
  render () {

     return (
      <div>
        {
          this.props.stations.map((station, index) => (
            <div className='radio_list radio_list--component' style={{cursor: 'pointer'}} onClick={() => this.handleClick(station.avatar)}>
              <div className='radio_list radio_list--component radio_list--component-station_name'>{station.name}</div>
            </div> 
          ))
        }
      </div>
    )
  }
}

export default radiosList

编辑：第一个答案有助于访问我需要的值。

Answer 1

这是通过向数据添加额外的clicked 状态属性来实现所需的方式。可能有更好的方法，但到目前为止，我就是这样做的。

class radiosList extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(index) {
    console.log(this)
    var data = [...this.state.data];
    data[index].clicked = !data[index].clicked;
    this.setState({data});

  }
  render () {
    var self = this;
     this.props.station.forEach(function(station) {
       self.state.data.push({name: station.name, avatar: station.avatar, clicked: false});
       self.setState({data: self.state.data});
     })
     return (
      <div>
        {
          this.state.data.map((station, index) => (
            <div className='radio_list radio_list--component' style={{cursor: 'pointer'}} onClick={() => this.handleClick(index)}>
              <div className='radio_list radio_list--component radio_list--component-station_name'>{station.name}</div>
            </div> 
          ))
        }
      </div>
    )
  }
}

export default radiosList