Question

我带来了API＆＃39;基于动态列表的内容，我尝试在每个li上应用mouserEnter。通过切换每个列表项中的内容来生成事件。该事件正在运行，但它同时切换所有列表项中的内容，但我希望它只切换与接收mouseEnter的列表项匹配的内容。

＆＃13;

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

＆＃13;

这是我的代码：

Answer 1

您的示例中有几个问题，首先是@aherriot声明您应该将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;"> <li><span data-id="editable-list-item">test1</span></li> <li><span data-id="editable-list-item">test2</span></li> <li><span data-id="editable-list-item">test3</span></li> </ul>移到地图之外。

接下来，我会将ul设置为this.state.hover上id的{{1}}。

下面的代码段显示了这项工作的基本示例，应该很容易适应您的代码。

item

onMouseEnter

Answer 2

也许您应该将<ul>标记移到this.state.work.map之外。您只需要显示一个<ul>，而不是每个元素都显示一个。

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

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

2 个答案: