Javascript 如何在onClick事件（ReactJS）之后停止onMouseOut事件？

我需要在将鼠标悬停在相邻文本上时使隐藏按钮可见。这是通过onMouseCenter和onMouseLeave事件完成的。 但是当单击文本时，我需要使按钮完全可见，并停止onMouseLeave事件

<div className="step-buttons" onMouseEnter={mouseOver.bind(this, 'feature')}
 onMouseLeave={mouseOut.bind(this, 'feature')} 
 onClick={showButtonOnClick.bind(this, 'feature')}>Test Suite
</div>

到目前为止，我已经尝试过了， 尝试使用removeEventListener删除onMouseLeave事件

<div className="step-buttons" onMouseEnter={mouseOver.bind(this, 'feature')}
 onMouseLeave={mouseOut.bind(this, 'feature')} 
 onClick={showButtonOnClick.bind(this, 'feature')}>Test Suite
</div>

我知道我们可以借助一个变量，比如：

const mouseOut = (divId) => {
  if (!wasClicked)
      document.getElementById(divId).style.visibility = "hidden";
}

<div className="step-buttons" onMouseEnter={mouseOver.bind(this, 'feature')}
 onMouseLeave={mouseOut.bind(this, 'feature')} 
 onClick={showButtonOnClick.bind(this, 'feature')}>Test Suite
</div>

但由于我也可以使用不同的按钮和文本，所以我也不想使用变量

<div className="step-buttons" onMouseEnter={mouseOver.bind(this, 'feature')}
 onMouseLeave={mouseOut.bind(this, 'feature')} 
 onClick={showButtonOnClick.bind(this, 'feature')}>Test Suite
</div>

<div className="step-buttons" onMouseEnter={mouseOver.bind(this, 'feature')}
 onMouseLeave={mouseOut.bind(this, 'feature')} 
 onClick={showButtonOnClick.bind(this, 'feature')}>Test Suite
</div>

测试套件

有什么可以帮我的吗

<div className="step-buttons" onMouseEnter={mouseOver.bind(this, 'feature')}
 onMouseLeave={mouseOut.bind(this, 'feature')} 
 onClick={showButtonOnClick.bind(this, 'feature')}>Test Suite
</div>

任何建议都是好的，

---

提前感谢：）

当您多次这样做时，似乎在不创建大量全局变量的情况下创建组件并使用其状态来存储可见性是值得的。

您可以使用removeEventListener删除ShowButtonNonclick函数中的mouseleave事件

<div className="step-buttons" onMouseEnter={mouseOver.bind(this, 'feature')}
 onMouseLeave={mouseOut.bind(this, 'feature')} 
 onClick={showButtonOnClick.bind(this, 'feature')}>Test Suite
</div>

showButtonOnClick(){
    ...your function...
    document.getElementById('step-button').removeEventListener('mouseleave',this.callback());
}

callback(){
   console.log("mouseleave event removed");
}

方式1: 您可以在MouseEnter函数中挂载一个eventlistener，并在onClick eventhandling中删除它，如下所示：

<div className="step-buttons" onMouseEnter={mouseOver.bind(this, 'feature')}
 onMouseLeave={mouseOut.bind(this, 'feature')} 
 onClick={showButtonOnClick.bind(this, 'feature')}>Test Suite
</div>

constructor(props) {
  super(props);
  this.text;
  this.onMouseLeave = this.onMouseLeave.bind(this);
}

onMouseEnter(){
  //apply your styles
  this.text.addEventListener('mouseleave', this.onMouseLeave);
}

onMouseLeave(){
  //remove your styles
}

showButtonOnClick(){
  //remove the eventlistener
  this.text.removeEventListener('mouseleave', this.onMouseLeave);
}

render(){
  return(
    <div ref={(thiscomponent) => {this.text = thiscomponent}} 
      onMouseEnter={this.onMouseEnter.bind(this, 'feature')}
      onClick={this.showButtonOnClick.bind(this, 'feature')}>
      Test Suite
    </div>);
  }

---

我能知道'ref={（c）=>{this.text=c}}}中使用的'c'是什么吗？对不起，得到你的答案了！但裁判不是为我工作。由于我使用的是redux，如何进行onMouseLeave事件绑定？至于redux，我从未使用过，对不起。但是我想一定有一种方法可以直接在redux中访问组件，这样您就可以在组件上挂载eventlistener了。也许有用？我刚刚添加了另一种可能的方法，可能对你有用。