React JS - 动态列表中的事件处理程序

我正在基于动态列表提供API s'内容，并且我试图在每个li上应用mouserEnter。通过切换每个列表项目中的内容来结果该事件。该事件正在工作，但它一次切换所有列表项中的内容，但我希望它仅切换与正在接收mouseEnter的列表项匹配的内容。React JS - 动态列表中的事件处理程序

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> 
 
    } 
 
}

这里是我的代码：

来源

2017-08-31 claudiobitar

有在你的榜样几个问题，首先是@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>

来源

2017-08-31 16:09:32 Purgatory

谢谢，但你能解释我更好吗？你的例子与我的有点不同。请给我更多的线索。 – claudiobitar

我是React JS的初学者 – claudiobitar

不同之处在于@Purgatory并不只是跟踪是否有东西被徘徊，他们正在追踪被徘徊的特定“工作”的ID。这样，当你映射数组时，你检查每一个id是否与id相匹配，然后根据这个id做出决定。 – aherriot

也许你应该移动<ul>标签外this.state.work.map你只想要一个<ul>展现出来，而不是一个对每个元素。

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

来源

2017-08-31 15:52:16 aherriot

谢谢。它解决了问题的一部分 – claudiobitar

React JS - 动态列表中的事件处理程序

回答

相关问题