反应。 如何通过onClick或onPress更改图标src？

Question

I wanna campaigns_icon change to campaigns_icon_selected when I click. Then if I click search_icon_pic, it will be the search_icon_pic_selected and campaigns_icon_selected changed to campaigns_icon

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

For simple, I think you can create 2 state properties then toggle the image over it. And also, you will need 2 method to change it, for example:

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

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

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

Then in your render method you can set it:

    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>
    );
   }
}