In React, onMouseEnter или зависание не работает должным образом

Question

У меня есть одно изображение с opacity = 1 в начале.

При попадании изображения на фотографию измените команду opacity = 0.5. Когда мышь покидает изображение, измените непрозрачность.

здесь один код:

mouseEnter() { 
    console.log('mouse enter') 
    const classname = '.' + this.props.post.code 
    document.querySelector(classname).classList.add('image-hover-opacity') 
} 

mouseLeave() { 
    console.log('mouse leave') 
    const classname = '.' + this.props.post.code 
    document.querySelector(classname).classList.remove('image-hover-opacity') 
} 

    render() { 
     <img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} /> 
    } 

OnMouseEnter и OnMouseLeave увольняют, когда мышь входит и выходит изображение, соответственно, хорошо. Но проблема в том, что когда я перемещаю мышь внутри изображения, запускаются как onMouseEnter, так и onMouseLeave.

И я также попробовал решение css, когда я наводил на изображение, изменил свойство непрозрачности. Но проблема та же: когда я перемещаю мышь внутри изображения, наведите курсор и не наведите несколько раз.

Как это решить? благодаря

---

UPDATE Существует что-то в моем предыдущем коде. Создал один jsfiddle, и он работает. Извините, ребята

Answer 1

Использование document.querySelector не так много «Реагирует мышление». Вы можете попробовать этот подход:

• Используйте Див envolving это IMG, чтобы попытаться избежать этого странного поведения MouseEnter в

• Используйте this.state с непрозрачностью

  constructor() { 
      this.state: { 
      opacity: 1 
  } 
  
  mouseEnter() { 
      console.log('mouse enter') 
      this.setState({opacity: 0.5}) 
  } 
  
  mouseLeave() { 
      console.log('mouse leave') 
      this.setState({opacity: 1}) 
  } 
  
      render() { 
       <div style={{opacity: this.state.opacity}}> 
       <img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} /> 
       </div> 
      } 
  

Answer 2

Я действительно думаю, что вы можете добиться этого только в CSS. Так что ваш компонент должен иметь простой className собственности и что класс должен иметь определения для:

.image-hover-opacity:hover { 
    opacity: 0.5; 
} 

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = {}; 
 
    } 
 
    
 

 
    render() { 
 
    return(
 
     <img className="image-hover-opacity" src="http://i.imgur.com/PLKabDV.png" /> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example />, document.getElementById('root'));

.image-hover-opacity:hover { 
 
    opacity: 0.5; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>