が反応する。 onClickまたはonPressでアイコンsrcを変更するには？

Question

クリックするとcampaign_icon_selectedに変更する必要があります。 は、その後、私はsearch_icon_picをクリックした場合、それはsearch_icon_pic_selectedされ、簡単なために

Here is part of my code: 

import campaigns_icon from '../../image/sidebar/campaigns white.png'; 
import campaigns_icon_selected from '../../image/sidebar/campaigns white.png'; 
import search_icon_pic from '../../image/sidebar/search white.png'; 
import search_icon_pic_selected from '../../image/sidebar/search white.png'; 



    return (
     <Sider 
     trigger={null} 
     collapsible={true} 
     collapsed={collapsed} 
     className="isomorphicSidebar"   
     > 
     <Link to={`${url}/status_board`}>   
      <img alt="" src={campaigns_icon} />     
     </Link> 
     <Link to={`${url}/search_result`}>   
      <img alt="" src={search_icon_pic}/>     
     </Link> 



     </Sider> 
    ); 

Answer 1

をcampaigns_iconように変更campaigns_icon_selected、私はあなたがそれの上に画像を切り替え、その後2つの状態のプロパティを作成することができると思います。そしてまた、あなたは例えば、それを変更するには、2の方法が必要になります。

constructor(props){ 
     super(props); 
     this.state = { 
      campaigns: false, 
      search: false 
     } 
    } 

    handleChangeCampaign(){ 
     this.setState({campaigns:!this.state.campaigns}) 
    } 

    handleChangeSearch(){ 
     this.setState({search:!this.state.search}) 
    } 

次に、あなたがそれを設定することができ、あなたのrenderメソッドで：

return (
     <Sider 
     trigger={null} 
     collapsible={true} 
     collapsed={collapsed} 
     className="isomorphicSidebar"   
     > 
     <Link to={`${url}/status_board`} onClick={this.handleChangeCampaign.bind(this)}>   
      <img alt="" src={this.state.campaigns? campaigns_icon_selected: campaigns_icon}/>     
     </Link> 
     <Link to={`${url}/search_result`} onClick={this.handleChangeSearch.bind(this)}>   
      <img alt="" src={this.state.search? search_icon_pic_selected: search_icon_pic}/>     
     </Link> 



     </Sider> 
    ); 

Answer 2

import campaigns_icon from '../../image/sidebar/campaigns white.png'; 
import campaigns_icon_selected from '../../image/sidebar/campaigns white.png'; 
import search_icon_pic from '../../image/sidebar/search white.png'; 
import search_icon_pic_selected from '../../image/sidebar/search white.png'; 

class MyCls extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     campaignsIconClicked: false, 
     searchIconClicked: false 
    }; 
    } 

    render() { 
    return (
     <Sider 
     trigger={null} 
     collapsible={true} 
     collapsed={collapsed} 
     className="isomorphicSidebar"   
     > 
     <Link to={`${url}/status_board`}>   
      <img onClick={() => this.setState({campaignsIconClicked: true}) } alt="" src={this.state.campaignsIconClicked ? campaigns_icon_selected : campaigns_icon} />  
     </Link> 
     <Link to={`${url}/search_result`}>   
      <img onClick={() => this.setState({searchIconClicked: true}) } alt="" src={this.state.searchIconClicked ? search_icon_pic_selected : search_icon_pic}/>     
     </Link> 
     </Sider> 
    ); 
    } 
}