尝试用 React 在 MouseOver 上交换图像

Question

我的数据库中有 2 张图像（图像和图像 2）。我正在从数据库中获取 2 张图像，但我希望图像在 onMouseOver 上发生变化，但我不太明白该怎么做。我们将不胜感激。

export default class Shop extends Component {
    constructor(props) {
        super(props);
        this.state = {
            products: []
        };
    }

    componentDidMount() {
        this.getProducts();
    }

    getProducts = () => {
        fetch('/users')
         .then(response => response.json())
         .then(response => {
             this.setState({products: response})
         })
    }

    setNewImage = () => {
       
    }

   
     render() {

        const {products} = this.state;
        return (
            <div >

<SideNavBar />
            
            <div className="container">
                   
               {products.map((product) => (
                   <div key={product.image}>
                  <img className="image" src= {product.image} onMouseOver={product.image2} /><br></br>
                 
                 </div>
                 
               ))}
               </div>

Answer 1

您可以简单地操作您从产品中获得的内容，并使用名为 'shownImage' 的参数在状态中进行设置，我在 sandBox 上制作了代码以使其正常工作，但也将留在此处： https://codesandbox.io/s/sad-bartik-lddhg?fontsize=14&hidenavigation=1&theme=dark

import React, { Component } from "react";
import ReactDOM from "react-dom";

export default class Shop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        {
          image: "https://vignette.wikia.nocookie.net/neon-colors/images/0/0c/Neon_red.JPG/revision/latest/window-crop/width/200/x-offset/0/y-offset/0/window-width/217/window-height/217?cb=20130529004401",
          image2: "https://www.tarkett.az/image/cache/catalog/SPOR/V35/C001348-omnisports-r35-ru/royal-blue-200x200.jpg",
          shownImage: "image"
        },
        {
          image: "https://www.tarkett.az/image/cache/catalog/SPOR/V35/C001348-omnisports-r35-ru/royal-blue-200x200.jpg",
          image2: "https://vignette.wikia.nocookie.net/neon-colors/images/0/0c/Neon_red.JPG/revision/latest/window-crop/width/200/x-offset/0/y-offset/0/window-width/217/window-height/217?cb=20130529004401",
          shownImage: "image"
        }
      ]
    };
  }

  showDiffrentImage = (imageName, productIndex) => {
    const { products } = this.state;
    products[productIndex].shownImage = imageName;

    this.setState({
      products
    });
  };

  render() {
    return (
      <div>
        Hello images!
        {this.state.products.map((product, index) => (
          <div>
            <img
              alt={'ops my img broke'}
              src={product[product.shownImage]}
              onMouseOver={() => this.showDiffrentImage("image2", index)}
              onMouseOut={() => this.showDiffrentImage("image", index)}
            />
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<Shop />, document.getElementById("root"));

在你的情况下，它只是 this.setState({products: response.map(product => { ...product, shownImage: 'image' })}), 或 this.setState({products: response.map(product => { image: product.image, image2: product.image2, shownImage: 'image' }})

尝试用 React 在 MouseOver 上交换图像

Trying to swap image onMouseOver with React

javascript

reactjs

events

mouseover

onmouseover