javascript - 在菜单区域外单击或悬停时关闭 react 按钮下拉菜单

Question

在我的 React 应用程序中，其中一个组件正在创建一个按钮下拉菜单，如下所示。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a onClick=doSomething href="#">HTML</a></li>
      <li><a onClick=doSomething href="#">CSS</a></li>
      <li><a onClick=doSomething href="#">JavaScript</a></li>
    </ul>   
</div>

如果有人点击/悬停此菜单区域以外的任何地方，我该如何关闭此菜单？

Answer 1

不要在 React 中使用 jQuery 事件和 DOM 操作，你没有捕获要点。
你有一个 state使用它!

在下面的示例中，您可以看到我删除了所有 jquery.js和 bootstrap.js文件并只保留 bootstrap.css .
我用 state为了显示/隐藏 <ul>列表(我将其设置为 display: block 以覆盖 display: none 的默认 bootstrap.css)。
我已经设置了 2 个关于显示和隐藏 <ul> 的主要处理程序和 1 个处理程序用于 onclick每个元素:

1. toggleShow() - 切换 show state中的属性(property)附于onBlur按钮。
2. hide() - 隐藏 <ul>当然是通过状态(它做了一个我会解释更多的事情)。
3. doSomething() - 将在点击某个元素时触发。

不过，当我们隐藏 <ul> 时，这个场景有一个很好的挑战。我们无法处理点击事件。

但为什么呢？

因为我们并没有真正隐藏它，所以当 state.show 时它不会被渲染。是假的。所以基本上有一种 setState 的竞争条件。触发对 doSomething 的处理程序的重新渲染无法运行的事件处理程序。
所以这里的挑战是确定是否触发了 onBlur 的事件元素。按钮的事件是<ul>里面的元素.如果是，那么我们需要让该元素触发它的 onClick事件，然后才设置状态并“隐藏”.
我们在 relatedTarget 的帮助下做到了这一点附加到 event .这是我们正在寻找的 active 元素，如果我们有一个但它不是 null然后我们触发它的点击事件(不管它是什么元素，因为我们不关心)，然后我们才用 show: false 设置状态.

一个工作示例:

class DropDown extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      show: false
    }
    this.doSomething = this.doSomething.bind(this);
    this.toggleShow = this.toggleShow.bind(this);
    this.hide = this.hide.bind(this);
  }

  doSomething(e){
    e.preventDefault();
    console.log(e.target.innerHTML);
  }

  toggleShow(){
    this.setState({show: !this.state.show});
  }

  hide(e){
    if(e && e.relatedTarget){
      e.relatedTarget.click();
    }
    this.setState({show: false});
  }
  
  render(){
    return(
      <div className="dropdown">
        <button 
          className="btn btn-primary dropdown-toggle"
          type="button"
          onClick={this.toggleShow}
          onBlur={this.hide}
        >

        {"Dropdown Example"}
          
        <span className="caret"></span>
        </button>
        {
          this.state.show &&
        (
          <ul className="dropdown-menu" style={{display: 'block'}}>
          <li><a onClick={this.doSomething} href="#">HTML</a></li>
          <li><a onClick={this.doSomething} href="#">CSS</a></li>
          <li><a onClick={this.doSomething} href="#">JavaScript</a></li>
        </ul>
        )
        }
      </div>
    );
  }
}


ReactDOM.render(<DropDown />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="root"></div>