React js：使用 onMouseOver 在 Div 上更改 img答案

【问题标题】：React js : Change img on Div whith onMouseOverReact js：使用 onMouseOver 在 Div 上更改 img
【发布时间】：2020-04-23 22:57:46
【问题描述】：

我需要你的帮助 :) （但首先，抱歉我的英语很接近......）。

当我将鼠标移过“a”应答器之一时，我想更改“div-img”中的“img src”...我尝试 onMouseOver，但失败了:(

'a' 的图像替换了 'div-img' 中的图像

编辑：好的，这是几乎完整的代码，真正看到问题：

@observer
export default class Home extends React.Component {
  static readonly language = "language";
  private static readonly en = "en";
  private static readonly fr = "fr";

  @observable private static selectLanguage = false;

  public render(): ReactElement {
    if (Home.selectLanguage) {
      return (
        <div style={{ height: '100vh', width: '100vw', overflow: 'hidden'}}>
          <MyHead />
          <body style={{backgroundColor: 'rgb(51, 63, 72)'}}>
            <div style={{ 
              maxWidth: '1150px',
              height: '300px',
              margin: 'auto',
             }}>
               <div style={{ display: 'flex', maxWidth: '450px'}}>
                <img style={{
                  maxWidth: '100%',
                  margin: 'auto'
                }}
                src='/images/***.png'/>
               </div>
            </div>

            <div style={{
              display: 'flex',
              flexWrap: 'wrap',
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              zIndex: 1,
              }}>

              <a href="/fr/" onClick={_ => { localStorage.setItem(Home.language, Home.fr); }} >
                <span className= 'shadow'>
                  <div style={{ margin: '0 15px', padding: '75px', backgroundColor: 'rgb(175, 39, 47)', clipPath: 'polygon(0 0, 100% 8%, 100% 92%, 0 100%)'}} >  
                    <h2>Français</h2>
                  </div>
                </span>
              </a>

              <a href="/en/" onClick={_ => {localStorage.setItem(Home.language, Home.en);}}>
                <span className= 'shadow'>
                  <div style={{ margin: '0 15px', padding: '75px', backgroundColor: 'rgb(175, 39, 47)', clipPath: 'polygon(0 8%, 100% 0, 100% 100%, 0 92%)'}}>
                    <h2>English</h2>
                  </div>
                </span>
              </a>

            </div>

            <main style={{filter: 'blur(4px)'}}>
              <component1 />
              <component2 />
            </main>

          </body>
        </div>
      )
    }

非常感谢您！

【问题讨论】：

标签： hover onmouseover reactjs

【解决方案1】：

我对您的代码进行了一些更改，首先，我使用的是 mouseOnEnter 而不是 mouseOnHover，并且我还添加了 mouseOnLeave 来重置图像（因为在您提到的问题中，您想要更改图像时你传递了（链接）标签。

我的解决方案使用 useState 反应钩子，onMouseEnter 为 div 使用

设置随机图像

https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg

https://i.picsum.photos/id/{image_id}/{width}/{height}.jpg

https://i.picsum.photos/id/50/50/50.jpg

OnMouseEnter 状态更新为图像 src / 位置并重置为 '' onMouseLeave。另外，我添加了

style={{ width: '50px', height: '50px' }}

到 div 以防止 div 在将鼠标悬停在示例代码中的链接上时四处移动。 50px也是图片的高度。

import React, { useState } from 'react'

const testCode = () => {
const [image, setImage] = useState('')
return (
    <>
      <div className="div-img" style={{ width: '50px', height: '50px' }}>
        <img src={image} />
      </div>
      <div>
        <a href="/fr/" onMouseEnter={() => setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)} onMouseLeave={() => setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
        </a>
        <a href="/en/" onMouseEnter={() => setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)} onMouseLeave={() => setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
        </a>
      </div>
    </>
  )
}

export default testCode

更新：使用 React 类

import React, { Component } from 'react'

class sampleCode extends Component {

  constructor(props) {
    super(props);
    this.state = { image: '' };
  }

  setImage = (imagePath) => {
    this.setState({ image : imagePath })
  }

  render() {
    return (
      <>
        <div className="div-img" style={{ width: '50px', height: '50px' }}>
          <img src={this.state.image}/>
        </div>
        <div>
          <a href="/fr/"
             onMouseEnter={() => this.setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)}
             onMouseLeave={() => this.setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
          </a>
          <a href="/en/"
             onMouseEnter={() => this.setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)}
             onMouseLeave={() => this.setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
          </a>
        </div>
      </>
    )
  }
}

export default sampleCode

希望这会有所帮助:)

【讨论】：

谢谢！但我使用类而不是 Hook，也没有随机图像。 div里也已经有静止图像了……是用onMouseLeave函数自动显示的吗？我会尝试根据我的代码调整您的解决方案，再次感谢您！
@jipay 我已经更新了答案，代码的第二个（更新后）版本使用了 React 类。此外，我不得不使用随机图像，因为我没有您正在使用的图像，但我必须在那里放一些东西让您与之相关。您必须在 onMouseLeave 和初始化状态时将默认图像设置为您想要的。否则，它不会自动更改为默认图像。如果它解决了您的问题，请接受答案。
谢谢！但我有一个错误：“只读”类型上不存在属性“图像”。 :'(
开启“src={this.state.image}”
你在使用打字稿吗？