Question

下面是我的代码。我已经完成了更改图像的部分，在div上进行了onmouseover。但是，当我将鼠标悬停在一个div上时，另一div上的图像也会发生变化。我只希望当前的div图片应该更改。我怎样才能做到这一点？还是有什么简单的方法可以实现这一目标？

预先感谢

class VolBon extends Component {

  constructor(props) {
    super(props);


  this.state = {
      img: require('../../../assets/images/orange/org-org.svg'),
      imgOne: require('../../../assets/images/orange/opp-org.svg'),
      imgTwo: require('../../../assets/images/orange/tra-org.svg'),
      imgThree: require('../../../assets/images/orange/ach-org.svg')
    };
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.handleMouseOut = this.handleMouseOut.bind(this);
  }

    handleMouseOver() {
      this.setState({
        img: require('../../../assets/images/white/org-whi.svg'),
        imgOne: require('../../../assets/images/white/opp-whi.svg'),
        imgTwo: require('../../../assets/images/white/tra-whi.svg'),
        imgThree: require('../../../assets/images/white/ach-whi.svg')
      });
    }

    handleMouseOut() {
      this.setState({
        img: require('../../../assets/images/orange/org-org.svg'),
        imgOne: require('../../../assets/images/orange/opp-org.svg'),
        imgTwo: require('../../../assets/images/orange/tra-org.svg'),
        imgThree: require('../../../assets/images/orange/ach-org.svg')
      });
    }


  render() {
    return (
    <div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
     <img src={this.state.img} />
</div>
<div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
     <img src={this.state.imgOne} />
</div>
<div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
     <img src={this.state.imgTwo} />
</div>
<div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
     <img src={this.state.imgThree} />
</div>
  )  
}

Answer 1

之所以发生这种情况，是因为您要更新同一函数中所有状态的值。实现目标的一种方法是通过一个唯一的标识符来标识每个div

handleMouseOver(val) {
  if(val === 0){
    this.setState({
        img: require('../../../assets/images/white/org-whi.svg')
    });
  } else if(val === 1){
     this.setState({
        imgOne: require('../../../assets/images/white/opp-whi.svg')
    });
  } else if(val === 2){
     this.setState({
        imgTwo: require('../../../assets/images/white/tra-whi.svg')
     });
  } else{
     this.setState({
        imgThree: require('../../../assets/images/white/ach-whi.svg')
     });
  }
}

render() {
    return (
        <div onMouseOver={() => this.handleMouseOver(0)} onMouseOut={this.handleMouseOut}>
            <img src={this.state.img} />
        </div>
        <div onMouseOver={() => this.handleMouseOver(1)} onMouseOut={this.handleMouseOut}>
            <img src={this.state.imgOne} />
        </div>
        <div onMouseOver={() => this.handleMouseOver(2)} onMouseOut={this.handleMouseOut}>
            <img src={this.state.imgTwo} />
        </div>
        <div onMouseOver={() => this.handleMouseOver(3)} onMouseOut={this.handleMouseOut}>
            <img src={this.state.imgThree} />
        </div>
    )  
}

在div React上更改图片OnMouse

1 个答案: