色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

你如何在反應(yīng)堆里盤旋？- onMouseLeave在快速懸停期間未注冊

CSS
黃文隆1年前9瀏覽0評論

在進(jìn)行內(nèi)聯(lián)樣式設(shè)計(jì)時(shí)，如何在ReactJS中實(shí)現(xiàn)懸停事件或活動(dòng)事件？

我發(fā)現(xiàn)onMouseEnter，onMouseLeave方法有問題，所以希望有另一種方法。

具體來說，如果您非常快速地將鼠標(biāo)懸停在一個(gè)組件上，那么只會(huì)注冊onMouseEnter事件。onMouseLeave永遠(yuǎn)不會(huì)觸發(fā)，因此無法更新狀態(tài)...使得組件看起來好像仍然被懸停在上方。我注意到同樣的事情，如果你試著模仿& quot:活動(dòng)& quotcss偽類。如果你快速點(diǎn)擊，只有onMouseDown事件會(huì)被注冊。onMouseUp事件將被忽略...使組件看起來是活動(dòng)的。

這是一個(gè)顯示問題的js fiddle:https://jsfiddle.net/y9swecyu/5/

代碼:

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 on mouse leave onMouseMove on mouseout on mouseover on mouseup

合成事件

它還提到以下幾點(diǎn):

React將事件規(guī)范化，使它們在不同的瀏覽器中具有一致的屬性。

下面的事件處理程序由冒泡階段的事件觸發(fā)。要注冊捕獲階段的事件處理程序，請將capture追加到事件名稱中。例如，不使用onClick，而是使用onClickCapture來處理捕獲階段的Click事件。

之前的回答相當(dāng)混亂。你不需要一個(gè)反應(yīng)狀態(tài)來解決這個(gè)問題，也不需要任何特殊的外部庫。這可以通過純css/sass來實(shí)現(xiàn):

風(fēng)格:

.hover {
  position: relative;

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

  &:hover &__hover {
    opacity: 1;
  }

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

  &__no-hover {
    opacity: 1;
  }
}

反應(yīng)組件

一個(gè)簡單的懸停純渲染函數(shù):

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}反復(fù)思考組件

注意:這個(gè)答案是針對這個(gè)問題的前一個(gè)版本的，在這個(gè)版本中，提問者試圖使用JavaScript來應(yīng)用css樣式…這可以簡單地用CSS來完成。

一個(gè)簡單的純css解決方案。 對于應(yīng)用基本樣式，CSS在99%的情況下比JS解決方案更簡單、更高效。(盡管更現(xiàn)代的CSS-in-JS解決方案——例如React組件等——更容易維護(hù)。)

運(yùn)行下面的代碼片段，看看它是如何工作的…

.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>

如果你能制作一個(gè)展示onMouseEnter / onMouseLeave或onMouseDown / onMouseUp bug的小演示，把它發(fā)布到ReactJS的問題頁面或郵件列表上是值得的，只是為了提出問題，聽聽開發(fā)人員對此有什么看法。

在您的用例中，您似乎暗示CSS :hover和:active狀態(tài)對于您的目的來說已經(jīng)足夠了，所以我建議您使用它們。CSS比Javascript快幾個(gè)數(shù)量級，也更可靠，因?yàn)樗苯釉跒g覽器中實(shí)現(xiàn)。

但是，不能在內(nèi)聯(lián)樣式中指定:hover和:active狀態(tài)。您所能做的就是為您的元素分配一個(gè)ID或類名，并在樣式表中編寫您的樣式，如果它們在您的應(yīng)用程序中是常量的話，或者在動(dòng)態(tài)生成的& ltstyle & gt標(biāo)簽。

這里有一個(gè)后一種技術(shù)的例子:https://jsfiddle.net/ors1vos9/

我剛剛在一個(gè)禁用的按鈕上監(jiān)聽onMouseLeave事件時(shí)遇到了同樣的問題。我通過偵聽包裝禁用按鈕的元素上的本機(jī)mou seleave事件來解決這個(gè)問題。

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>
    );
}

這里有一把小提琴，https://jsfiddle.net/qfLzkz5x/8/

我會(huì)用onMouseOver & amponMouseOut。反應(yīng)中的原因:

onMouseEnter和onMouseLeave事件從左邊的元素傳播到正在進(jìn)入的元素，而不是普通的冒泡，并且沒有捕獲階段。

這是鼠標(biāo)事件的React文檔。

一個(gè)叫做styled-components的包可以很好地解決這個(gè)問題。

參考

Glen Maddern -使用樣式化組件對應(yīng)用程序進(jìn)行樣式化反應(yīng) 例子

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>

你不能只使用內(nèi)嵌樣式。不要建議在JavaScript中重新實(shí)現(xiàn)CSS特性，我們已經(jīng)有了一種非常強(qiáng)大的語言，而且為這個(gè)用例構(gòu)建的速度非常快——CSS。所以用吧！做了Style It來輔助。

npm安裝樣式-保存

函數(shù)語法

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語法

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;

用鐳！

以下是他們網(wǎng)站上的一個(gè)例子:

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'
  }
};

當(dāng)onMouseEnter被調(diào)用時(shí)，我也遇到了類似的問題，但是有時(shí)相應(yīng)的onMouseLeave事件沒有被觸發(fā)，下面是一個(gè)對我很有效的解決方法(它部分依賴于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/

為什么會(huì)這樣(在我的例子中):我正在運(yùn)行一個(gè)jQuery滾動(dòng)動(dòng)畫(通過$('#item ')。單擊項(xiàng)目時(shí)顯示動(dòng)畫({ scrollTop: 0 })。所以光標(biāo)不會(huì)“自然地”離開項(xiàng)目，而是在JavaScript驅(qū)動(dòng)的動(dòng)畫中...在這種情況下，onMouseLeave沒有被React正確觸發(fā)(React 15.3.0，Chrome 51，桌面)

我知道這個(gè)問題已經(jīng)提出有一段時(shí)間了，但是我剛剛遇到了與onMouseLeave()不一致的問題 我所做的是對下拉列表使用onMouseOut()并對整個(gè)菜單使用鼠標(biāo)左鍵，它是可靠的，并且每次我測試它時(shí)都有效。 我在文檔中看到了這些事件:https://Facebook . github . io/react/docs/events . html # mouse-events 下面是一個(gè)使用https://www . w3schools . com/bootstrap/bootstrap _ drop downs . 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>
  )
}

我個(gè)人在React中使用Style It作為inline-style，或者在CSS或SASS文件中單獨(dú)保存我的樣式...

但是如果你真的有興趣做內(nèi)聯(lián)，看看這個(gè)庫，我在下面分享了一些用法:

在組件中:

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;

結(jié)果如下:

<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>

懸停是CSS的一個(gè)特性；它附帶了應(yīng)用程序的CSS部分，所以用正確的方式來做是非常有趣的。簡單地說，當(dāng)我需要React應(yīng)用程序中的一個(gè)元素上的懸停效果時(shí)，首先，我在我的CSS文件中創(chuàng)建一個(gè)類，然后我將創(chuàng)建的類添加到元素的className中。我遵循的步驟是:

創(chuàng)建一個(gè)CSS文件，除非你有index.css

創(chuàng)建一個(gè)啟用了懸停偽類的類

。懸停_ _效果:懸停{}

添加您需要的效果

。懸停_ _效果:懸停{ 背景色:rgb(255，255，255)； 顏色:rgb(0，0，0)； }

然后將hover _ _效果添加到該類的組件中，當(dāng)鼠標(biāo)指針懸停在該組件上時(shí)，該組件應(yīng)該是不同的

盤旋

請檢查我的沙盒現(xiàn)場演示。