ReactJS - не работает смена изображения наMouseOver - PullRequest
Новая
       21

ReactJS - не работает смена изображения наMouseOver

0 голосов
/ 30 декабря 2018

Моя цель - создать компонент кнопки изображения без сохранения состояния, который изменяет изображения при наведении на него курсора и который впоследствии я могу использовать в других местах.

Моя текущая проблема заключается в том, что я не могу установить «наведение»"изображение, когда вызывается событие onMouseOver.Изображение не отображается и выглядит следующим образом:

enter image description here

// Assets
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';

const HoverImage = () => {
  function over(e) {
    e.currentTarget.src = { imageSelected };
  }
  function out(e) {
    e.currentTarget.src = { image };
  }
  return <img src={image} onMouseOver={over} onMouseOut={out} />;
};

export default HoverImage;

Когда я не наводю курсор на компонент, изображение отображается правильно,Что я делаю неправильно или как я могу улучшить код для достижения моей цели?

Кроме того, я не хочу, чтобы пути к изображениям были жестко запрограммированы, например, в CSS.Лучше всего было бы установить изображения с помощью реквизита, я думаю.

1 Ответ

0 голосов
/ 30 декабря 2018

Просто удалите {} вокруг imageSelected и image, когда вы вставляете {} вокруг них, вы фактически пропускаете объект, а не свое изображение. 

import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';

const HoverImage = () => {
  function over(e) {
    e.currentTarget.src =  imageSelected ;
 }
  function out(e) {
    e.currentTarget.src =  image ;
  }
    return <img src={image} onMouseOver={over} onMouseOut={out} />;
   };

 export default HoverImage;

для второго вопроса, который вы можете передатьизображения в качестве реквизита и показать их так: 

 const HoverImage = props => {
 function over(e) {
  e.currentTarget.src = props.hoverImage;
}
 function out(e) {
   e.currentTarget.src = props.normalImage;
}
return <img src={props.normalImage} onMouseOver={over} onMouseOut={out} />;
};

Вы можете проверить это Sandboox для получения дополнительной информации;

...