反应子防止调用父方法

Question

当onMouseOver发生时，我的孩子正在阻止调用父方法。为了更好地理解问题，我正在添加代码片段以及我想要实现的目标。

  renderDropdown(){
    let dropState = !this.state.dropdownActive;
    this.setState({dropdownActive: dropState})
  }

<li key={item.class} onMouseOver={this.renderDropdown} onMouseLeave={this.renderDropdown}>{this.state.dropdownActive ? <div className="toolbar-dropdown"></div> : null}<i className={`fas ${item.class}`}></i></li>

当我将鼠标悬停在li元素上时，一切都按预期工作，但当<i>上出现悬停时，元素方法不会被调用。因此<i>元素涵盖了li方法。如何解决这个问题？

Answer 1

当指针进入子元素时，onMouseOver事件再次触发，切换下拉状态。使用onMouseEnter可能对您有用，因为当鼠标进入子元素时它不会再次触发。

see this Stack Overflow question