ReactJS中如何在onClick事件后终止onMouseOut事件？

嘿，这个需求我太懂了——要处理大量元素的悬停/点击状态，又不想堆一堆变量对吧？给你两个实用的方案，都不用搞一堆全局变量：

方案1：用DOM自定义属性追踪状态（最小改动现有代码） #

这个思路是让每个按钮元素自己“记住”是否被点击过，不用全局变量，直接给DOM元素加自定义属性data-clicked来标记状态：

修改事件处理函数： #

mouseOver = (divId) => {
  const button = document.getElementById(divId);
  button.style.visibility = "visible";
}

mouseOut = (divId) => {
  const button = document.getElementById(divId);
  // 只有当按钮没被点击过（没有data-clicked属性）时，才执行隐藏
  if (!button.dataset.clicked) {
    button.style.visibility = "hidden";
  }
}

showButtonOnClick = (divId) => {
  const button = document.getElementById(divId);
  button.style.visibility = "visible";
  // 给按钮标记“已点击”状态，后续mouseOut就不会隐藏它了
  button.dataset.clicked = "true";
}

你的JSX可以保持不变： #

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

这个方案的好处是几乎不用改你现有的结构，每个元素的状态自己维护，完全不会互相干扰。

方案2：用React状态对象管理（更符合React最佳实践） #

如果想避免直接操作DOM，用React的状态来统一管理所有元素的点击/悬停状态会更规范。我们可以用一个对象clickedButtons来存储所有被点击过的元素ID，键是元素ID，值是布尔值：

初始化状态： #

state = {
  clickedButtons: {}, // 存储已点击的元素ID: { feature: true, xxx: false }
  hoveredButtons: {}  // 存储当前悬停的元素ID
}

状态驱动的事件函数： #

mouseOver = (divId) => {
  this.setState(prevState => ({
    hoveredButtons: { ...prevState.hoveredButtons, [divId]: true }
  }));
}

mouseOut = (divId) => {
  // 只有元素没被点击过，才取消悬停状态
  if (!this.state.clickedButtons[divId]) {
    this.setState(prevState => ({
      hoveredButtons: { ...prevState.hoveredButtons, [divId]: false }
    }));
  }
}

showButtonOnClick = (divId) => {
  this.setState(prevState => ({
    clickedButtons: { ...prevState.clickedButtons, [divId]: true }
  }));
}

JSX中用状态控制按钮显示： #

<div 
  className="step-buttons" 
  onMouseEnter={() => this.mouseOver('feature')} 
  onMouseLeave={() => this.mouseOut('feature')} 
  onClick={() => this.showButtonOnClick('feature')}
>
  Test Suite 
  <button 
    id="feature"
    style={{ 
      visibility: this.state.clickedButtons['feature'] || this.state.hoveredButtons['feature'] 
        ? 'visible' 
        : 'hidden' 
    }}
  >
    操作按钮
  </button>
</div>

这个方案的优势是完全遵循React的状态管理逻辑，避免了直接操作DOM的副作用，而且所有状态都集中在一个对象里，后续维护起来也更方便。

内容的提问来源于stack exchange，提问作者Niveditha Karmegam