Reactjs 所有映射元素上的onMouseEnter和onMouseLeave触发器

我试图在映射的项目上产生悬停效果，但所有项目都会触发鼠标事件

我怀疑我失去了这个，或者我改变状态的方式是错误的，我把所有共享它的元素都搞砸了

这是一个剪下来的：

  constructor(props) {
  super(props);
    this.state = {
      scale: 1,
      shadow: 0
    };
  }

  handleMouseEnter = () => {
    this.setState({
      scale: 1.1,
      shadow: 1,
    })
  }

  handleMouseLeave = () => {
    this.setState({
      scale: 1,
      shadow: 0
   })
 }

  render() {
    return (
      <div>
          {data.products.map((item, index) =>
            <Paper 
              key={index} 
              elevation={this.state.shadow} 
              style={{transform: `scale(${this.state.scale})`}}
              onMouseEnter={this.handleMouseEnter}
              onMouseLeave={this.handleMouseLeave}
            >
              {item.text}
            </Paper>
          )}
      </div>   
    );
  }

构造函数（道具）{
超级（道具）；
此.state={
比例：1，
阴影：0
};
}
HandleMouseCenter=（）=>{
这是我的国家({
比例：1.1，
影子:1,，
})
}
handleMouseLeave=（）=>{
这是我的国家({
比例：1，
阴影：0
})
}
render（）{
返回(
{data.products.map（（项，索引）=>
{item.text}
)}
);
}

我也有同样的问题

我通过使用onMouseOver和onMouseOut而不是onMouseEnter和onMouseLeave来修复它，并在新容器中使用自己的状态编写处理程序

对于您的案例，类似这样的内容：

第一个组件：

constructor(props) {
    super(props);
    this.state = {

    };
}
render() {
    return (
        <div>
            {data.products.map((item, index) =>
                return <Paper key={index} />
            )}
        </div>
    );
}

构造函数（道具）{
超级（道具）；
此.state={
};
}
render（）{
返回(
{data.products.map（（项，索引）=>
回来
)}
);
}

第二部分

constructor(props) {
    super(props);
    this.state = {
        scale: 1,
        shadow: 0
    };
}

handleMouseEnter = () => {
    this.setState({
        scale: 1.1,
        shadow: 1,
    })
}

handleMouseLeave = () => {
    this.setState({
        scale: 1,
        shadow: 0
    })
}

render() {
    return (
        <div elevation={this.state.shadow} 
             onMouseOver={this.handleMouseEnter} 
             onMouseOut={this.handleMouseLeave} 
             style={transform: `scale(${this.state.scale})`}>
                {this.props.item.text}
        </div>
    );
}

构造函数（道具）{
超级（道具）；
此.state={
比例：1，
阴影：0
};
}
HandleMouseCenter=（）=>{
这是我的国家({
比例：1.1，
影子:1,，
})
}
handleMouseLeave=（）=>{
这是我的国家({
比例：1，
阴影：0
})
}
render（）{
返回(
{this.props.item.text}
);
}

问题中的“映射项”和“所有项”有什么区别？那么哪些项目应该触发事件呢？您的

.shadow

和

.scale

标志不是每个项目，因此设置它们会影响每一张

论文

，这就是您试图解决的问题吗？通过映射项目，我指的是使用map（）循环@loganfsmyth是的，这正是我想弄明白的，然后你会希望这些标志出现在-

纸上。现在每个组只有一个标志，所以每个项目都会切换所有内容。