javascript - 鼠标悬停在 React 中

Question

我试图在鼠标悬停在另一个 div 元素上时显示一个 div。我已经通过 onMouseEnter 和 onMouseLeave 成功地做到了这一点。

这里的问题是，如果您快速从一个 div 移动到另一个(它是一个包含产品数据的 div 数组)，index[0] 的值变为真。

它的工作方式是，当鼠标进入其中一个数组时，我将一个数组初始化为 false，它变为 true 并显示我想要的 div。一旦它离开，它就会将其设置回 false。

this.state = {
        isProductsHovering: new Array(this.props.currentProducts.length).fill(false)
    };

handleMouseHover = (idx) => {
    this.setState({
        isProductsHovering: update(this.state.isProductsHovering, {
            [idx]: { $set: !this.state.isProductsHovering[idx] }
        })
    })
}

render() {
    return this.props.currentProducts.map((product, idx) => {
        return <Fragment key={idx}>
            <div className="product-grid-view col-6 col-md-4" >
                <div
                    className=" product-holder"
                    onMouseEnter={this.handleMouseHover.bind(this, idx)}
                    onMouseLeave={this.handleMouseHover.bind(this, idx)}>
                    <div className="image-container" align="center">
                        <img src={"/img/product-3.jpg"} alt="" />
                        {
                            this.state.isProductsHovering[idx] &&
                            <div className="product-buttons">
                                <Link to={`products/${product.id}`} className="btn-detail" text="View Details" />
                                <Link to='#' className="btn-cart" icons={["icon-cart", "icon-plus"]} />
                            </div>
                        }
                    </div>
                    <div className="details-holder">
                        <span className="part-text">{product.desc}</span><br />
                        <span className="manufacturer-text">{product.manufacturer.name}</span>
                        <div className="product-review_slide">
                            <Stars values={product.averageRating} {...starsRating} />
                            <span className="product-review">{getLength(product.reviews)} review</span>
                        </div>
                        <span className="product-price">{product.salesPrice.toFixed(2)}</span>
                        <span className="product-currency">SR</span>
                    </div>
                </div>
            </div>
        </Fragment>
    })
}

更新

我做了一个 stackblitz 项目来重现建议的相同问题:

https://stackblitz.com/edit/react-mouse-hover .

对于所有想明白我的意思的人。我附上了问题的照片。如果将鼠标移动到两个 div 上(尽可能快地上下移动)，会发生以下情况:

mouse hover broken

Answer 1

对于这种情况，我不会依赖数组和索引来使其工作。您进一步使 handleMouseHover 函数和 isHovering 的检查复杂化。

处理这种情况的“更 React”的方法是让每个 Product 本身成为一个组件。而这个 Product 组件将有自己的状态 isHovered 和 handleOnHover 方法，这样你就可以创建更简洁可靠的代码而无需依赖在数组 index 上:

App.js 可以像这样简单:

class App extends Component {

  render() {
    return (
      <div>
      {
        data.map(product =>
          <Product product={product} />
        )
      }
      </div>
    )
  }
}

一个新的 Product.js:

import React from 'react'
import ReactHoverObserver from 'react-hover-observer';

export default class Product extends React.Component {
  render() {
    const { product } = this.props
    return (
      <ReactHoverObserver className="product-grid-view col-6 col-md-4">
      {
        ({isHovering}) => (
          <div className=" product-holder">
            <div className="image-container" align="center">
              <img src={"/img/product-3.jpg"} alt="" />
              {
                isHovering &&
                <div className="product-buttons">
                  <button className="btn-detail">View Details</button>
                </div>
              }
            </div>
            <div className="details-holder">
              <span className="part-text">{product.desc}</span><br />
              <span className="manufacturer-text">{product.manufacturer.name}</span>
              <div className="product-review_slide">
                <span className="product-review">0 review</span>
              </div>
              <span className="product-price">{product.salesPrice.toFixed(2)}</span>
              <span className="product-currency">Currency</span>
            </div>
          </div>
        )
      }
      </ReactHoverObserver>
    )
  }
}

我已经把mofiication放在Stackblitz:https://stackblitz.com/edit/react-mouse-hover-2cad4n