渲染列表下拉菜单，其他选定的下拉菜单未在响应中关闭

Question

我是新来反应js的人。在这里，我具有功能，在单击下拉菜单中打开的按钮时，将呈现按钮的列表。现在，当我从另一个选项中打开另一个下拉菜单时，上一个没有关闭。

我有以下代码

This is my child component



 toggleDropdownView() {
      this.setState({
        showSetting: !this.state.showSetting,
        accountSettingVisible: true
      })
    }


   handleDocumentClick(evt) { 
      if (this.isClickOnClass(evt, 'settings-button') || this.isClickOnClass(evt, 'space-testrail-dropdown')) {
        return;
      }
          this.setState({
            showSetting: false,
            accountSettingVisible: false,
            caseResultCheckboxVisible: false
          });

    }


     <div className='float-right mnt-5 position-relative'>
                <button className='btn--m btn--light settings-button' onClick={ this.toggleDropdownView }> Settings </button>
                { this.accountSettingDropdown() }
              </div>

现在，我有我的父组件，

我有一张地图，我正在渲染此子组件。

{ accounts.map(this.accountItem) }

因此，这里为每个列表项创建了每个实例。所以，我没有任何商店，我的意思是redux / mobx，所以，我该如何仅使用本地状态进行管理。有人可以帮我吗？

谢谢。