ResactJS에서 Hover하는 방법 - onMouseHouse 빠른 Hover 동안 등록되지 않음

ResactJS에서 Hover하는 방법 - onMouseHouse 빠른 Hover 동안 등록되지 않음

반응에서 호버 이벤트 또는 활성 이벤트를 수행하는 방법인라인 스타일링 할 때 JS?

나는 OnMouseEnter, onMouseLeving 접근방식이 버거우니 다른 방법이 있기를 바란다.

특히 구성요소를 매우 빠르게 마우스로 가리키면 onMouseEnter 이벤트만 등록된다.OnMouseLeve는 절대 발사하지 않으므로 상태를 업데이트할 수 없음...구성 요소가 여전히 맴돌고 있는 것처럼 나타나도록 방치하는 경우":능동적인" css 사이비계급을 흉내내려고 해도 나는 같은 것을 알아챘다.정말 빠르게 클릭하면 onMouseDown 이벤트만 등록된다.onMouseUp 이벤트가 무시됨...구성 요소가 활성 상태로 유지됨

여기 이 문제를 보여주는 JSFiddle이 있다: https://jsfiddle.net/y9swecyu/5/

JSFiddle 문제 동영상: https://vid.me/ZJEO

코드:

var Hover = React.createClass({
    getInitialState: function() {
        return {
            hover: false
        };
    },
    onMouseEnterHandler: function() {
        this.setState({
            hover: true
        });
        console.log('enter');
    },
    onMouseLeaveHandler: function() {
        this.setState({
            hover: false
        });
        console.log('leave');
    },
    render: function() {
        var inner = normal;
        if(this.state.hover) {
            inner = hover;
        }

        return (
            <div style={outer}>
                <div style={inner}
                    onMouseEnter={this.onMouseEnterHandler}
                    onMouseLeave={this.onMouseLeaveHandler} >
                    {this.props.children}
                </div>
            </div>
        );
    }
});

var outer = {
    height: '120px',
    width: '200px',
    margin: '100px',
    backgroundColor: 'green',
    cursor: 'pointer',
    position: 'relative'
}

var normal = {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'red',
    opacity: 0
}

var hover = {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'red',
    opacity: 1
}

React.render(
    <Hover></Hover>,         
    document.getElementById('container')
)

이거 먹어본 적 있어?

onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

합성 이벤트

또한 다음과 같은 사항도 언급하고 있다.

이벤트가 서로 다른 브라우저에 걸쳐 일관된 속성을 갖도록 이벤트를 정규화하십시오.

아래의 이벤트 핸들러는 버블 단계의 이벤트에 의해 촉발된다.캡처 단계에 대한 이벤트 핸들러를 등록하려면 이벤트 이름에 캡처를 추가하십시오. 예를 들어 onClick을 사용하는 대신 onClickCapture를 사용하여 캡처 단계에서 클릭 이벤트를 처리하십시오.

이전의 답변들은 꽤 혼란스럽다.이것을 해결하기 위해 반응 상태나 특별한 외부 리브가 필요하지 않다.이는 순수한 css/sass로 달성할 수 있다.

스타일:

.hover {
  position: relative;

  &:hover &__no-hover {
    opacity: 0;
  }

  &:hover &__hover {
    opacity: 1;
  }

  &__hover {
    position: absolute;
    top: 0;
    opacity: 0;
  }

  &__no-hover {
    opacity: 1;
  }
}

반응 구성 요소

심플한Hover순수 렌더링 기능:

const Hover = ({ onHover, children }) => (
    <div className="hover">
        <div className="hover__no-hover">{children}</div>
        <div className="hover__hover">{onHover}</div>
    </div>
)

사용법

그런 다음 다음과 같이 사용하십시오.

    <Hover onHover={<div> Show this on hover </div>}>
        <div> Show on no hover </div>
    </Hover>

사용할 수 있다onMouseOver={this.onToggleOpen}그리고onMouseOut={this.onToggleOpen}구성 요소에 대해 곰곰이 생각하다

참고: 이 대답은 질문자가 CSS로 간단히 수행할 수 있는 css 스타일을 적용하기 위해 JavaScript를 사용하려고 했던 이전 버전에 대한 것이었습니다.

심플한css-유일한 해결책.

기본 스타일을 적용하기 위해, CSS는 JS가 99%의 시간을 해결하는데 더 간단하고 더 효과적이다.(예: 보다 현대적인 CSS-in-JS 솔루션)반응 구성 요소 등은 거의 틀림없이 유지보수가 가능하다.)

이 코드 조각 실행으로 해당 코드 조각 실행...

.hover-button .hover-button--on,
.hover-button:hover .hover-button--off {
  display: none;
}

.hover-button:hover .hover-button--on {
  display: inline;
}

<button class='hover-button'>
  <span class='hover-button--off'>Default</span>
  <span class='hover-button--on'>Hover!</span>
</button>

onMouseEnter/onMouseLeave 또는 onMouseDown/onMouseUp 버그를 보여주는 작은 데모를 만들 수 있다면, Reaction에 게시하는 것이 가치 있을 것이다.JS의 이슈 페이지나 메일링 리스트는 단지 문제를 제기하고 개발자들이 그것에 대해 무슨 말을 해야 하는지 듣기 위해서입니다.

당신의 사용 사례에서 당신은 CSS :호버 및 :활성 상태이면 당신의 목적에 충분할 것이라고 암시하는 것 같으니, 나는 당신이 그것들을 사용할 것을 제안한다.CSS는 브라우저에서 직접 구현되기 때문에 Javascript보다 더 빠르고 신뢰할 수 있는 규모의 주문이다.

단 :호버 및 :활성상태는 인라인 스타일로 지정할 수 없다.당신이 할 수 이름을 에 당신의 것이다. 역동적으로 된 아이디나나나나스위스(ID)에서 당신의 스타일을 것이다. 스타일시트가 당신의 어플리케이션에서 다소 일정하다면, 또는 동적으로 생성된 스타일시트에 스타일시트를 쓰는 것이다.<style>꼬리표를 달다

후자 기법의 예는 다음과 같다: https://jsfiddle.net/ors1vos9/

나는 방금 'MouseLeping events on a disabled 버튼'을 들을 때 이 같은 문제에 부딪쳤다.나는 장애인 버튼을 감싼 요소에서 네이티브 마우스 leave 이벤트를 들으면서 그 주변에서 작업을 했다.

componentDidMount() {
    this.watchForNativeMouseLeave();
},
componentDidUpdate() {
    this.watchForNativeMouseLeave();
},
// onMouseLeave doesn't work well on disabled elements
// https://github.com/facebook/react/issues/4251
watchForNativeMouseLeave() {
    this.refs.hoverElement.addEventListener('mouseleave', () => {
        if (this.props.disabled) {
            this.handleMouseOut();
        }
    });
},
render() {
    return (
        <span ref='hoverElement'
            onMouseEnter={this.handleMouseEnter}
            onMouseLeave={this.handleMouseLeave}
        >
            <button disabled={this.props.disabled}>Submit</button>
        </span>
    );
}

여기 fiddle https://jsfiddle.net/qfLzkz5x/8/가 있다.

나는 OnMouseOver & OnMouseOut을 사용할 것이다.반응 원인:

onMouseEnter 및 onMouseLep 이벤트는 일반적인 거품 대신 요소에서 입력되는 것으로 전파되며 캡처 단계가 없다.

다음은 마우스 이벤트의 반응 설명서에 나와 있다.

가 있다.styled-components이 문제를 우아하게 해결할 수 있다.

참조

1. Glen Maddyndic - 스타일링 반응 앱(Styling React App

예

const styled = styled.default
const Square = styled.div`
  height: 120px;
  width: 200px;
  margin: 100px;
  background-color: green;
  cursor: pointer;
  position: relative;
  &:hover {
    background-color: red;
  };
`
class Application extends React.Component {
  render() {
    return (
      <Square>
      </Square>
    )
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id='app'></div>

인라인 스타일링만으로는 불가능해.JavaScript에서 CSS 기능을 재구축하는 것을 권장하지 마십시오. 이 사용 사례에 맞게 매우 강력하고 매우 빠르게 구축된 언어를 이미 보유하고 있습니다, CSS.그러니까 사용해!Made Style It 지원.

npm install style-it --save

기능 구문(JSFIDEL)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .intro:hover {
        color: red;
      }

    `,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}

export default Intro;

JSX 구문(JSFIDEL)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .intro:hover {
          color: red;
        }
      `}

      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    </Style>
  }
}

export default Intro;

라듐을 사용하라!

다음은 그들의 웹사이트에서 나온 예다.

var Radium = require('radium');
var React = require('react');
var color = require('color');

@Radium
class Button extends React.Component {
  static propTypes = {
    kind: React.PropTypes.oneOf(['primary', 'warning']).isRequired
  };

  render() {
    // Radium extends the style attribute to accept an array. It will merge
    // the styles in order. We use this feature here to apply the primary
    // or warning styles depending on the value of the `kind` prop. Since its
    // all just JavaScript, you can use whatever logic you want to decide which
    // styles are applied (props, state, context, etc).
    return (
      <button
        style={[
          styles.base,
          styles[this.props.kind]
        ]}>
        {this.props.children}
      </button>
    );
  }
}

// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
  base: {
    color: '#fff',

    // Adding interactive state couldn't be easier! Add a special key to your
    // style object (:hover, :focus, :active, or @media) with the additional rules.
    ':hover': {
      background: color('#0074d9').lighten(0.2).hexString()
    }
  },

  primary: {
    background: '#0074D9'
  },

  warning: {
    background: '#FF4136'
  }
};

OnMouseEnter를 호출할 때 비슷한 문제가 발생했지만 때때로 해당 onMouseLeving 이벤트가 실행되지 않았을 때 다음과 같은 해결책이 제공됨(일부적으로 jQuery에 의존함):

var Hover = React.createClass({
    getInitialState: function() {
        return {
            hover: false
        };
    },
    onMouseEnterHandler: function(e) {
        this.setState({
            hover: true
        });
        console.log('enter');

        $(e.currentTarget).one("mouseleave", function (e) {
            this.onMouseLeaveHandler();
        }.bind(this));

    },
    onMouseLeaveHandler: function() {
        this.setState({
            hover: false
        });
        console.log('leave');
    },
    render: function() {
        var inner = normal;
        if(this.state.hover) {
            inner = hover;
        }

        return (
            <div style={outer}>
                <div style={inner}
                    onMouseEnter={this.onMouseEnterHandler} >
                    {this.props.children}
                </div>
            </div>
        );
    }
});

jsfiddle: http://jsfiddle.net/qtbr5cg6/1/에서 확인하십시오.

---

왜 그런 일이 일어났는지(나의 경우):jQuery 스크롤 애니메이션을 실행 중(Through)$('#item').animate({ scrollTop: 0 })항목을 클릭할 때.따라서 커서가 항목을 "자연스럽게" 남겨두지 않지만, 자바스크립트 기반 애니메이션 중에 ... 이 경우 반응(React 15.3.0, Chrome 51, Desktop)에 의해 onMouseLevel이 제대로 실행되지 않았다.

이 질문이 나온 지 꽤 됐지만 나는 그저 온마우스리브()와 불일치하는 같은 이슈에 부딪칠 뿐인데, 내가 한 것은 드롭 리스트에 온마우스리브()를 사용하고 전체 메뉴에 마우스리스크를 사용하는 것인데, 그것은 믿을 만하고 매번 시험해 볼 때마다 효과가 있다.여기서 문서: https://facebook.github.io/react/docs/events.html#mouse-events에서 이벤트를 보았다. https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp을 사용하는 예:

handleHoverOff(event){
  //do what ever, for example I use it to collapse the dropdown
  let collapsing = true;
  this.setState({dropDownCollapsed : collapsing });
}

render{
  return(
    <div class="dropdown" onMouseLeave={this.handleHoverOff.bind(this)}>
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu" onMouseOut={this.handleHoverOff.bind(this)}>
        <li><a href="#">bla bla 1</a></li>
        <li><a href="#">bla bla 2</a></li>
        <li><a href="#">bla bla 3</a></li>
      </ul>
    </div>
  )
}

나는 개인적으로 CSS 또는 SASS 파일에서 내 스타일을 따로 유지하거나 반응할 때 인라인 스타일에 스타일 잇을 사용한다...

하지만 정말 인라인에 관심이 있으시다면, 도서관을 보십시오. 아래 몇 가지 사용법을 공유해 보십시오.

구성 요소:

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
        {`
          .intro {
            font-size: 40px;
          }
        `}

        <p className="intro">CSS-in-JS made simple -- just Style It.</p>
      </Style>
    );
  }
}

export default Intro;

출력:

    <p class="intro _scoped-1">
      <style type="text/css">
        ._scoped-1.intro {
          font-size: 40px;
        }
      </style>

      CSS-in-JS made simple -- just Style It.
    </p>

또한 다음과 같이 CSS에 마우스 커버가 있는 JavaScript 변수를 사용할 수 있다.

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    const fontSize = 13;

    return Style.it(`
      .intro {
        font-size: ${ fontSize }px;  // ES2015 & ES6 Template Literal string interpolation
      }
      .package {
        color: blue;
      }
      .package:hover {
        color: aqua;
      }
    `,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}

export default Intro;

그리고 그 결과는 다음과 같다.

<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 13px;
    }
    ._scoped-1 .package {
      color: blue;
    }
    ._scoped-1 .package:hover {
      color: aqua;
    }
  </style>

  CSS-in-JS made simple -- just Style It.
</p>

호버(Hover)는CSS특징; 그것과 함께 나온다.CSS앱의 측면도 그렇고 올바른 방법으로 하는 것도 너무 재밌다.간단히 말해서, 리액션 앱의 요소에 대한 호버 효과가 필요할 때, 나는 먼저 내 클래스를 만든다.CSS파일을 만든 다음 생성된 클래스를 요소의 className에 추가한다.내가 따르는 단계는 다음과 같다.

1. 만들기CSS없는 한 철하다index.css

2. 다음 클래스를 사용하여 클래스 만들기hover사이비 클래스 활성화

   .reason__effect:reason {}

3. 필요한 효과 추가

   .reason__effect:limit { 배경색: rgb(재배색, 255, 255); 색상: rgb(0, 0, 0), }

4. 그런 다음 다음을 추가하십시오.hover__effect마우스 포인터가 클래스 위에 있을 때 달라야 하는 클래스의 구성 요소

   호버

내 샌드박스에서 라이브 데모를 확인하십시오.

참조URL: https://stackoverflow.com/questions/29981236/how-do-you-hover-in-reactjs-onmouseleave-not-registered-during-fast-hover-ove