在 JSX 中悬停时更改图像

Question

如何更改 JSX 中

hover

上的图像

我正在尝试这样的事情：

<img src={require('../../../common/assets/network-inactive.png')}
onMouseOver={this.src = require('../../../common/assets/network.png')}
onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} />

Answer 1

我假设您正在 React 组件中编写此代码。如：

class Welcome extends React.Component {
  render() {
    return (
       <img src={require('../../../common/assets/network-inactive.png')}
       onMouseOver={this.src = require('../../../common/assets/network.png')}
       onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} 
       />
    );
  }
}

在这种情况下，

定位

this.src

将不起作用，因为您本质上是在班级中寻找名为

src

的内容。例如

this.src

可以找到这样的东西：

src = () => (alert("a source"))

但这不是您想要做的。您想要定位图像本身。

因此您需要进入

<img />

上下文。你可以像这样轻松做到这一点：

 <img
    onMouseOver={e => console.log(e)}
  />

从那里您可以定位

currentTarget

属性等。这将进入您的元素的上下文。所以现在你可以做这样的事情：

  <img
    src="img1"
    onMouseOver={e => (e.currentTarget.src = "img2")}
  />

对于

onMouseOut

也可以做同样的事情。

您可以对其他元素使用相同的方法，因为您肯定需要再次执行此操作。但要小心，因为这不是唯一的解决方案。在更大的项目中，您可能需要考虑使用存储（Redux），并传递 props 而不是改变元素。

Answer 2

最好是在州内管理：

class App extends Component {
  state = {
    img: "https://i.vimeocdn.com/portrait/58832_300x300"
  }

  render() {
    return (
      <div style={styles}>
        <img
          src={this.state.img}
          onMouseEnter={() => {
            this.setState({
              img: "http://www.toptipsclub.com/Images/page-img/keep-calm-and-prepare-for-a-test.png"
            })
          }}

          onMouseOut={() => {
            this.setState({
              img: "https://i.vimeocdn.com/portrait/58832_300x300"
            })
          }}
        />
      </div>
    )
  }
};

https://codesandbox.io/s/5437qm907l

Answer 3

另一种非类方法：

import arrow from "../images/arrow.svg";
import arrowHover from "../images/arrowHover.svg";

function Arrow() {
  const [over, setOver] = useState(false);
  return (
    <div
      onMouseOver={() => setOver(true)}
      onMouseOut={() => setOver(false)}
    >
         <img
          src={over ? arrowHover : arrow}
          alt="arrow"
          width="50"
          height="50"
        />
    </div>   
  )
}

Answer 4

这是使用函数组件和打字稿的非类方法：

interface IconProps {
  src?: string;
  srcOnHover?: string;
  alt?: string;
}

const Icon: React.FC<IconProps> = ({ src, srcOnHover, alt }) => (
  <img
    src={src}
    alt={alt}
    onMouseOver={(e): void => {
      srcOnHover && (e.currentTarget.src = srcOnHover);
    }}
    onMouseOut={(e): void => {
      srcOnHover && (e.currentTarget.src = src || '');
    }}
  />
);

可以这样使用：

<Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png" alt="Description" />

Answer 5

这里是一个在 React 中使用 onMouseEnter 和 onMouseLeave 处理图像 src 的好方法。贡献这个非基于类的组件版本。

   import React, { useState } from 'react';
   
   function imageHoveControl({) {
     let imageVar = {
       nonhovered: '/public/image.jpg'
       hovered: '/public/imageHover.jpg'
     }
        let selectorDown = imageVar.nonhovered.src
        let selectorUp = imageVar.hovered.src
        //Pop "up" to meet cursor on hover 
        const [selectorImage, setSelectorImage] = useState(selectorDown);

        function handleMouseEnter() {
          setSelectorImage(selectorUp)
        }
        function handleMouseLeave() {
          setSelectorImage(selectorDown)
        }

          return (
              <img
                className="rounded-full h-14 w-14 sm:h-20 sm:w-20 bg-contain mx-1"
                src={selectorImage}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
              />
          )
        }

Answer 6

简单的方法：

类 Home 扩展了 React.Component { 状态={ 图标：ICON_ONE }

渲染（）{ 返回（ this.setState({icon:ICON_TWO})}
onMouseOut={() => this.setState({ 图标: ICON_ONE })} /> ） }