событие, когда листья мыши не обнаружено

Question

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

div соединен с этими методами:

mouseOut: function() { 
    console.log("Mouse out!!!"); 
    this.setState({flipped: false}); 
    }, 

    mouseOver: function() { 
    console.log("Mouse over!!!"); 
    this.setState({flipped: true}); 
    }, 

Событие onMouseOver хорошо работает. Однако, onMouseOut не действует, и похоже, что функция mouseOut не вызывается.

Вместо mouseOut Я также пробовал onMouseLeave и onMouseDown, но все еще нет эффекта`.

Как я могу заставить компонент React обнаружить, что мышь вышла?

Answer 1

Должно быть что-то не так в том, как вы соединяете части своего кода вместе, потому что эти два метода кажутся совершенно прекрасными.

Вот рабочий пример в JSFiddle:

React mouseOver and mouseOut

Попробуйте сравнить это с вашим кодом, может быть, вы можете заметить разницу. Вещи, которые могут пойти не так:

• Вы ошибаетесь, указав свои имена. Обработчики событий - camelCase - если вы случайно используете неправильный случай, например mouseout, они будут проигнорированы.
• Вы случайно назначаете возвращаемое значение своей функции вместо самой функции, например. mouseOut={this.mouseOut()} - опора будет неопределенной, ничего не будет называться.