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

Question

当我单击时，我想将campaigns_icon更改为campaigns_icon_selected。然后，如果我单击search_icon_pic，它将是search_icon_pic_selected，campaigns_icon_selected将更改为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

为了简单起见，我认为你可以创建两个状态属性，然后在它上面切换图像。此外，您还需要两个方法来更改它，例如：

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