反应，onMouseOver事件触发列表中的所有项目而不是一个

我有问题悬停在李列表中的按钮。盘旋一个李项按钮后显示每一个李项。链接到codepen下面的codepen。反应，onMouseOver事件触发列表中的所有项目而不是一个

const ItemView = (props) => { 
return <li 
onMouseOver={() => props.onMouseOver()} 
onMouseMove={() => props.onMouseOver()} 
onMouseLeave={() => props.onMouseLeave()} 
> 
    <div className="item__row"> 
     <h5>{props.name}</h5> 
     <h6>Age: {props.age}</h6> 
     <p>{props.strenght}/100</p> 


    {props.isHover ? props.children[0] : null} 


    </div> 
    {props.children[1]} 
</li>

}

Codepen：https://codepen.io/dominik3246/pen/QqKzzp

来源

2017-09-23 dominik

您需要使用元素的数组，它跟踪哪些特定元素是徘徊。因此，采取isHover状态变量像

constructor(){ 
    ... 
    this.state ={ 
    ... 
    isHover: [false, false, false, false, false], 
    ... 
    } 
}

数组然后，让你的鼠标悬停功能返回包含该项目的索引的范围是这样

mouseOver(i) { 
    return() => { 
     if (this.state.isHover[i] === true) { 
     return this.state; 
     } 
     let isHover = [...this.state.isHover] 
     isHover[i] = true; 
     this.setState({ ...this.state, isHover }); 
    } 
    }

一个函数，然后通过isHover和mouseOver道具你的ItemView这样的

{this.state.data.map((d, i) => { 
      return (
      <ItemView 
       key={d.id} 
       name={d.name} 
       strenght={d.strenght} 
       age={d.age} 
       onMouseOver={this.mouseOver(i)} 
       onMouseLeave={this.mouseExit} 
       isHover={this.state.isHover[i]} 
      > 
      ...

这里是你的代码的工作示例：Link of example

来源

2017-09-23 12:32:16

多数民众赞成在伟大的，但如果我不知道我会得到多少数据呢？我的意思是喜欢读取数据，有时我可以接收5个数据项，有时是100个。在这里，不幸的是，你需要手动设置isHover状态 – dominik

@dominik那是因为你跟踪每个子元素在父项中的盘旋因此你有保持一个数组来跟踪哪个子元素被徘徊。另一种方法是将悬停处理函数移动到子元素，以便每个孩子负责处理其自己的悬停逻辑。在那种情况下，你只需要渲染孩子而不会跟踪哪些孩子被徘徊。 –

反应，onMouseOver事件触发列表中的所有项目而不是一个

回答

相关问题