如何在鼠标事件React JS上杀死组件状态

时间:2017-06-17 23:54:00

标签: javascript reactjs events javascript-events mouseevent

我有一个弹出窗口,当我将鼠标悬停在/离开按钮时打开/关闭,目前在我的道具中设置为false,我想将其设置为true所以当加载页面时你看到弹出但是当使用悬停在它上面,状态重新变为假,所以我可以再次盘旋它并看到它,但我似乎无法弄明白。

<!-- language: lang-js -->

Class App extends Component {

 constructor(props) {
    super(props);

   this.state = { isHovered: false };
   this.handleHover = this.handleHover.bind(this);

 }

 handleHover(){
    this.setState({
        isHovered: !this.state.isHovered
    });
 }

 render() {

 const box = this.state.isHovered ? "box open" : "box";

 return(

 <a className="spot1" onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}>
</a>

<div className={box}>
  <p>Lorem ipsum dolor si</p>
</div>

)

2 个答案:

答案 0 :(得分:1)

我相信你需要第二个变量来检查你的组件是否第一次被加载/渲染, 您可以在下面找到一个简单的例子。

class Item extends React.Component {
  constructor(props) {
    super(props);
    this.state = {loaded : true, hovered : false};

  }

  popState () {
    const {loaded, hovered} = this.state; 
    // check if the component was loaded
    // which will be only once
    // because the state for loaded will be set to false
    if (loaded) {
        return this.setState({
          hovered : !hovered,
          loaded : false
        });
    }
    this.setState({
      hovered : !hovered
    });
  }

  render () {
    const {loaded, hovered} = this.state;
    let box;
    // first page reload
    if (loaded) {
      box = 'show';
    } else {
      box = hovered ? 'show' : 'hide';
    }

    return (
      <a 
        onMouseEnter={this.popState.bind(this)} 
        onMouseLeave={this.popState.bind(this)}>
        My link
        <div 
          className={box}>Tooltip</div>
      </a>
     );
  }
}

答案 1 :(得分:0)

你已经制作了你想要的东西,它还没有正确连接。

首先,设置isHovered: true,以便在页面加载时显示弹出窗口。

接下来,将功能onMouseEnteronMouseLeave更改为this.handleHover,这就是您应该做的所有事情。