反應，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事件觸發列表中的所有項目而不是一個

回答

相關問題