React tabIndex onBlur don not hide element

Question

我有一个侧边栏元素，该侧栏元素使用tabIndex和onBlur来控制可见性，因此当用户选择侧边栏以外的任何东西时，它会自动隐藏。

这效果很好，但是我需要在侧边栏中添加一个下拉菜单，然后将其添加到focus并导致侧边栏倒塌(在用户可以选择某些东西之前(。

state = {
  visible: true
}
componentDidMount () {
  this.focusSidebar()
}
componentDidUpdate () {
  if (this.state.visible) this.focusSidebar()
}
focusSidebar () {
  ReactDOM.findDOMNode(this.refs.sidebarRegion).focus()
}
hideSidebar () => {
  this.setState({ visible: false })
}
render () {
  return (
    <div
      onBlur={this.hideSidebar}
      tabIndex='0'
      className={`sidebar ${this.state.visible ? '' : 'hidden'}`}
      ref='sidebarRegion'
    >
      <select>
        <option>Foo</option>
      </select>
    </div>
  )
}

我没有看到我当前的侧边栏实现来处理此问题的好方法，但是我试图找到一种自我统一侧栏元素的方法，而无需吊起可见/隐藏状态。组件。

Answer 1

您可以使用document.activeElement实现所需的目标。我不会添加更多详细信息，如这里所述。您也可以看一下这个要旨。

在这里，它通过您的代码进行了演示，我没有添加CSS，而是一个控制台日志来告诉您何时应该隐藏：

class Hello extends React.Component {
 state = {
  visible: true
}
componentDidMount () {
  this.focusSidebar()
}
componentDidUpdate () {
  if (this.state.visible) this.focusSidebar()
}
focusSidebar () {
  ReactDOM.findDOMNode(this.refs.sidebarRegion).focus()
}
hideSidebar(e) {
  var currentTarget = e.currentTarget;
  setTimeout(()=>{
    if (!currentTarget.contains(document.activeElement)) {
      this.setState({ visible: false })
      console.log("Hiding the sidebar!");
    }
}, 0);
}
render () {
  return (
    <div
      onBlur={this.hideSidebar.bind(this)}
      tabIndex='0'
      className={`sidebar ${this.state.visible ? '' : 'hidden'}`}
      ref='sidebarRegion'
    >
      <select>
        <option>Foo</option>
      </select>
    </div>
  )
}
}
ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<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>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>