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（如hide和show）创建一些动作时，它总是适用于每个元素。

我的代码在某种程度上有效。当我渲染列表并单击任何按钮时，每个按钮都会执行操作：

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

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

1 个答案: