如何更改已点击的图片【react-router v4】

Question

我正在使用 react router v4 进行路由。链接应用在图像中。单击该图像时（如果它处于活动状态），我想更改该图像。

这是显示我想要的概念的代码

class PrivateServiceType extends Component {
  render() {
    console.log('context', this.context.router);
    let image = isActive ? 
      <img src={IconHouseSelected} alt="apartamentos" className="img-responsive" /> :
      <img src={IconHouseNotSelected} alt="apartamentos" className="img-responsive" />
    return (
        <div className="row text-center">
          <div className="col-xs-12 col-sm-12 col-md-4 serviceImg">
            <Link to="/apartamentos">
              {image}
              <h4>APARTAMENTOS</h4>
            </Link>
          </div>
      )
}

PrivateServiceType.contextTypes = {
  router: React.PropTypes.object
}

Answer 1

将currentUrl 存储为状态对象并将其分配为img 的src。在 img 上放置一个 onClick 处理程序以切换 currentUrl。

class PrivateServiceType extends Component {

  constructor(){
    super();

    this.state = {
        iconhouseUrl = 'notselected.png'
     }

    this.toggleIcon = this.toggleIcon.bind(this);
   }

  render() {
    console.log('context', this.context.router);
    return (
        <div className="row text-center">
          <div className="col-xs-12 col-sm-12 col-md-4 serviceImg">
            <Link to="/apartamentos">
              <img src={this.state.iconhouseUrl} alt="apartamentos" className="img-responsive" onClick={this.toggleIcon}/>
              <h4>APARTAMENTOS</h4>
            </Link>
          </div>
      )
   }

  toggleIcon(){
     if(this.state.iconhouseUrl === 'notselected.png')
         this.setState({iconhouseUrl:'selected.png'})
     else
         this.setState({iconhouseUrl:'notselected.png'})
  }

}

PrivateServiceType.contextTypes = {
  router: React.PropTypes.object
}

iconhouseUrl 状态变量保存 url，toggleIcon 函数处理绑定到 img 的 onClick 处理程序的更改

根据你的评论这里是路由敏感方式

<Link to="/apartamentos">
          <img src={(location.pathname === '/apartamentos' )?'houseselected.png':'houseunselected.png'} 
           alt="apartamentos" className="img-responsive"/>
          <h4>APARTAMENTOS</h4>
</Link>

它的作用是将当前路径（包含在location.pathname 中）与条件进行比较，并相应地设置图标。