Question

我有一个弹出窗口，当我将鼠标悬停在/离开按钮时打开/关闭，目前在我的道具中设置为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>

)

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

Answer 2

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

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

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

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

2 个答案: