У меня есть компонент "Действие"
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', но я хочу выделить только изображение, на которое я наводил указатель мыши. Заранее спасибо за ответы!





Вы можете просто использовать простой 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" />