ReactJS handleHover изменить имя класса

У меня есть компонент "Действие"

state = {
        highlight: null
    }
      handleLeave = () => {
        this.setState({
          highlight: null
      })
      }
      handleHover = (e) =>{
        this.setState({
          highlight: 'highlight'
      })
      }


    <img onMouseEnter = {this.handleHover} onMouseLeave = {this.handleLeave} className = {`${this.state.highlight}`} src = "img" />

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

<img onMouseEnter = {this.handleHover} onMouseLeave = {this.handleLeave} className = {`${this.state.highlight}`} src = "img" />
 <img onMouseEnter = {this.handleHover} onMouseLeave = {this.handleLeave} className = {`${this.state.highlight}`} src = "img" />

затем, когда вы наводите курсор на один из них, каждому дается className 'highlight', но я хочу выделить только изображение, на которое я наводил указатель мыши. Заранее спасибо за ответы!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
317
2

Ответы 2

Вы можете просто использовать простой CSS, чтобы добиться эффекта наведения курсора на изображения.

именно так:

img.anyClassName:hover {
    //css stuff
}

Разве этого не должно быть достаточно для вашего использования?

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

// HOC that holds state/handlers and passes to wrapped component
    const handleHover = (Component) => 
      class extends React.Component {
        state = {
          highlight: null
        }

        handleLeave = () =>
          this.setState({
            highlight: null
          })

        handleHover = (e) =>
          this.setState({
            highlight: 'highlight'
          })

        render() {
          return (
            <Component
              handleHover = {handleHover}
              handleLeave = {handleLeave}
              highlight = {this.state.highlight}
            />
          );
        }
      }

// Component that is wrapped with HOC that renders an <img> with handlers and state
const Img = handleHover(({
  handleHover,
  handleLeave,
  highlight,
  src
}) => (
  <img
    onMouseEnter = {handleHover}
    onMouseLeave = {handleLeave}
    className = {`${highlight}`}
    src = {src}
  />
))

// Use `IMG` in your component, each will maintain it's own highlight state
<Img src = "1.jpg" />
<Img src = "2.jpg" />

Другие вопросы по теме