Question

我的图像很少，我需要在onMouseEnter上稍微放大一点（使用CSS，即transform : scale(1.2);），并在onMouseLeave上还原。我有下面的代码可以正常工作。

CSS：-

.style {
    transform : scale(1.2);
    transition: transform .5s ease-out;
}

.shrink {
    transform : scale(1);
    transition: transform .5s ease-out;
}

在构造函数中声明的变量：-

this.state = { 
            isHovered: false
        };

JS方法：-

handleHover(){
        this.setState({
            isHovered: !this.state.isHovered
        });
    }

逻辑操作在渲染方法中：-

const imgClass = this.state.isHovered ? 'profile-pic style' : 'profile-pic shrink';

还有两张图片：-

   <Image title ='one' src="pics/pic1.png" circle className={imgClass}  
    onClick={ () => this.props.methodRef('one')} height="70" width="100"     
onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}/>

     <Image title ='two' src="pics/pic2.png" circle className={imgClass}  
    onClick={ () => this.props.methodRef('two') } height="70" width="100"     
onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}/>

此代码可以正常运行，正如我期望的那样。但是问题在于两个图像都同时放大和缩小。

如何区分ReactJs中鼠标在不同元素上的移动。

Answer 1

您可以将Image组件包装为自己的组件，以控制它们并向其中添加状态。也许另一种方法是在您的父组件中有一个数组，例如：

for(var j = 0; j < chart.data.datasets.length; j++){
  for (var i = 0; i < chart.data.datasets[j].data.length; i++) {
      text.push('<li class="list-inline-item"><small><i class="fas fa-circle pr-1" style="color:' +
              chart.data.datasets[j].backgroundColor[i] + '"></i>');
      if (chart.data.datasets[j].labels[i]) {
          text.push('<span class="font-weight-bold">' + chart.data.datasets[j].labels[i] + '</span>');
      }
      text.push('</small></li>');
  }
}

因此，您可以在组件中添加ID：

state: {
    images:[{id: "image1", isHovered: false},
            {id:"image2", isHovered: false}]
}

然后handleHover：

<Image id={this.state.images[0].id} ...rest />

这太复杂了。您应该将其包装在另一个组件中并从那里管理状态。

如何区分React中的元素

1 个答案: