Javascript 我想在React中做一个下拉列表。单击按钮应打开一个子菜单。单击子菜单外部应将其关闭

这是我现有的工作代码。这可以很好地工作，但如果我在子菜单外单击，当它打开时，子菜单仍保持打开状态

class UserTypeDropdown extends React.Component
  constructor: (props) ->
    super(props)
    @state =
      display_submenu: false
  @propTypes:
    selected: React.PropTypes.string.isRequired

  submenu_display:->
    if @state.display_submenu
      'block'
    else
      'none'
  button_class_names:->
    classNames(
        'select-btn ': true,
        'user_role ': @props.selected is 'user',
        'admin_role ': @props.selected is 'admin'
        )

  selected_text:->
    if @props.selected == 'user'
      'User'
    else
      'Administrator'

  render:->
    div {className: 'user-type-dropdown'},
      button { className: @button_class_names(), onClick: @_toggleSubmenu },
        @selected_text()
      ul {className: 'submenu submenu_content access_submenu', style: {display: @submenu_display()}},
        li {onClick: @select_admin},
          a {},
            'Administrator'
        li {onClick: @select_user},
          a {},
            'User'
  _toggleSubmenu: =>
    @setState display_submenu: !@state.display_submenu
  select_admin: =>
    @_toggleSubmenu()
    actions.setUserRole('admin')
  select_user: =>
    @_toggleSubmenu()
    actions.setUserRole('user')

我想实现在子菜单打开时单击子菜单外部，然后关闭子菜单

我在React中读到了如何做到这一点，我遇到了很多建议，建议我应该使用onFocus和onBlur，而不是onClick

这对我来说很有意义，因为这意味着下拉列表只有在浏览器中处于焦点时才应该打开。因此，我的渲染函数和方法变得非常有用

  render:->
    div {className: 'user-type-dropdown'},
      button { className: @button_class_names(), onFocus: @_toggleSubmenu, onBlur: @_toggleSubmenu },
        @selected_text()
      ul {className: 'submenu submenu_content access_submenu', style: {display: @submenu_display()}},
        li {onClick: @select_admin},
          a {},
            'Administrator'
        li {onClick: @select_user},
          a {},
            'User'
  _toggleSubmenu: =>
    @setState display_submenu: !@state.display_submenu
  select_admin: =>
    actions.setUserRole('admin')
  select_user: =>
    actions.setUserRole('user')

但是，使用

按钮上的
onFocus:
和
onBlur:
元素，
现在，点击
li
中的任何一个都不会触发
@select\u admin
或
@select\u user
它只会触发
@\u toggle\u子菜单
，点击似乎不会进入/冒泡到下面的
li
元素

从阅读和我可以看到，事件应该泡沫下降，但对我来说，他们根本不是

我是React Coffescript/JS世界的新手，所以请原谅任何不正确的命名约定

我认为我的理解肯定有缺陷，因为我在任何地方都找不到这个问题的答案

任何帮助都将不胜感激。
您的问题是：只要您单击一个项目，onBlur事件将首先触发。这会导致重新渲染（因为您执行了
setState
）。因此，onClick事件永远不会运行

解决此问题的方法（使用onFocus和onBlur）是重新安排HTML设置：


确保主菜单项具有焦点（
已经正常）
确保您的子菜单不能有焦点（
正常）
确保子菜单位于主菜单组件内（您需要更改此项）

这样，如果单击其中一个子项，主菜单项不会失去焦点

您可以找到一个简单的（仅限HTML和javascript）。
这非常有意义。我从以前的无反应设计中继承了html结构，从未想过要改变它。明天我会更新结构，让你知道我进展如何！谢谢：）这非常有效，非常感谢@wintvelt！