javascript - react 。如何通过onClick或onPress更改图标src？

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

简单来说，我认为您可以创建 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})
    }

然后在你的渲染方法中你可以设置它:

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