javascript - onFocus 不会触发显示和隐藏列表项

Question

知道我的代码有什么问题吗？我的 onFocus 事件在 div

上不起作用

class Hello extends React.Component {
  state = {
    openDropdown: false
  }
  toggleDropdown = () => {
  alert('x')
    this.setState({
        openDropdown: !this.state.openDropdown
    })
  }
  render() {
    return (
      <div>
        <div onFocus={this.toggleDropdown} onBlur={this.toggleDropdown}>
          MyList
        </div>
        <ul className={this.state.openDropdown ? 'show' : 'hide'}>
          <li>abc</li>
          <li>123</li>
          <li>xyz</li>
        </ul>
      </div>
    );
  }
}

http://jsfiddle.net/sua5j29b/

这种方法还有一个问题，当我点击其中一个列表时如何关闭下拉菜单？如果我更改 openDropdown 的状态，该行为可能会被破坏。

Answer 1

要在 div 上应用 onFocus 或 onBlur，我必须使用

div 上的 tabIndex='0'