React JS - 動態列表中的事件處理程序

Question

我正在基於動態列表提供API s'內容，並且我試圖在每個li上應用mouserEnter。通過切換每個列表項目中的內容來結果該事件。該事件正在工作，但它一次切換所有列表項中的內容，但我希望它僅切換與正在接收mouseEnter的列表項匹配的內容。

import _ from 'lodash'; 
 
import React, { Component } from 'react'; 
 
import ReactDOM from 'react-dom'; 
 

 
export default class Dribbble extends React.Component { 
 
    constructor(props) { 
 
    super(props);  
 
    
 
    this.state = { 
 
     work: [], 
 
     hover: false  
 
    }; 
 
    
 
    this.handleMouseEnter = this.handleMouseEnter.bind(this); 
 
    this.handleMouseLeave = this.handleMouseLeave.bind(this); 
 
    
 
    } 
 

 
    handleMouseEnter(){ 
 
    this.setState({ hover: true }) 
 
    } 
 

 
    handleMouseLeave(){ 
 
    this.setState({ hover: false }) 
 
    } 
 

 
    componentDidMount() { 
 
    this.ShotList(); 
 
    } 
 

 
    ShotList() { 
 
    return $.getJSON('https://api.dribbble.com/v1/shots?per_page=3&access_token=41ff524ebca5e8d0bf5d6f9f2c611c1b0d224a1975ce37579326872c1e7900b4&callback=?') 
 
     .then((resp) => { 
 
     this.setState({ work: resp.data.reverse() }); 
 
     }); 
 
    } 
 

 
    render() { 
 
    
 
    const works = this.state.work.map((val, i) => {  
 
     
 
    return <li key={i} className="box"   
 
      onMouseEnter={this.handleMouseEnter} 
 
      onMouseLeave={this.handleMouseLeave}   
 
      >  
 
      {!this.state.hover ?  
 
      <div> 
 
       <img className="cover" src={val.images.normal} /> 
 
       <div className="bar"> 
 
       <h2>{val.title}</h2> 
 
       <span>{val.views_count}</span> 
 
       <i className="fa fa-eye fa-2x" aria-hidden="true"></i> 
 
       </div> 
 
      </div> 
 
      : null} 
 
      {this.state.hover ? 
 
      <div> 
 
       <h3>{val.user.name}</h3> 
 
       <img className="avatar img-circle" src={val.user.avatar_url}/> 
 
       <p>{val.description}</p>    
 
      </div> 
 
      : 
 
      null 
 
      }   
 
     </li> 
 
    });  
 

 
    return <ul>{works}</ul> 
 
    } 
 
}

這裏是我的代碼：

Answer 1

有在你的榜樣幾個問題，首先是@aherriot指出你應該移動ul地圖之外。

接下來我會將this.state.hover設置爲item的id在onMouseEnter上懸停。

下面的代碼片段顯示了這個工作的一個基本示例，應該很容易適應您的代碼。

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     items: [{id: 1, name: 'Fred'}, {id: 2, name: 'Albert'}, {id: 3, name: 'Jane'}], 
 
     hover: false, 
 
    } 
 
    
 
    this.handleMouseEnter = this.handleMouseEnter.bind(this); 
 
    this.handleMouseLeave = this.handleMouseLeave.bind(this); 
 
    this.renderItem = this.renderItem.bind(this); 
 
    } 
 
    
 
    handleMouseEnter(id){ 
 
    console.log(`handleMouseEnter this.setState({ hover: ${id} })`); 
 
    this.setState({ hover: id }) 
 
    } 
 

 
    handleMouseLeave(){ 
 
    console.log('handleMouseLeave this.setState({ hover: false })'); 
 
    this.setState({ hover: false }) 
 
    } 
 
    
 
    renderItem(item, index) { 
 
    let content = []; 
 
    content.push(
 
     <span>ID: {item.id}, Name: {item.name}</span> 
 
    ); 
 
    
 
    if(this.state.hover === item.id) { 
 
     console.log('display " - hovering" for item id: ' + item.id); 
 
     content.push(
 
     <span> - hovering</span> 
 
    ); 
 
    } 
 
    
 
    return (
 
     <li key={item.id} 
 
     onMouseEnter={() => this.handleMouseEnter(item.id)} 
 
     onMouseLeave={this.handleMouseLeave} 
 
     > 
 
     {content} 
 
     </li> 
 
    ) 
 
    } 
 
    
 
    render() { 
 
    return <ul> 
 
     {this.state.items.map(this.renderItem)} 
 
    </ul> 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 2

也許你應該移動<ul>標籤外this.state.work.map你只想要一個<ul>展現出來，而不是一個對每個元素。

您可以在底部放置在您的div標籤，而不是內部：return (<div><ul>{works}</ul></div>)