Как обрабатывать onClick для многих объектов из того же массива

Question

У меня есть некоторые проблемы, и я получаю шуйоны немного. Я хочу скопировать мой массив объектов. И сделайте каждого из них интерактивным. После щелчка Я хочу, чтобы конкретный объект показывал только свои аватары:

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 and show), он всегда работает над элементом EVERY.

У меня есть код, который работает в некотором роде. Когда я визуализации списка и нажмите на любую кнопку, действие происходит для каждого из них:

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 

Edit: первый ответ помог доступа к значениям мне нужно.

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