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（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