单击“DropdownItem”时如何保持“DropdownMenu”打开？答案

【问题标题】：How to keep "DropdownMenu" open when clicking on a "DropdownItem"?单击“DropdownItem”时如何保持“DropdownMenu”打开？
【发布时间】：2019-06-18 12:07:49
【问题描述】：

当我从 'reactstrap' 的 ButtonDropdown 单击 DropdownItem 时，我需要不要关闭 DropdownMenu。当我在 DropdownMenu 之外单击时，它会关闭。

我已经尝试通过传入参数 "isOpen" 的状态以及在的 "toggle" 中发生的功能来控制ButtonDropdown，但它不起作用。

这是我的代码：

import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

class DropdownTest extends Component {

   constructor(props) {
     super(props);
     this.state = {
       dropdownOpen: false, 
     }
     this.toggleDropdown = this.toggleDropdown.bind(this);
   }

   toggleDropdown() {       
     this.setState({
       dropdownOpen: !this.state.dropdownOpen,
     });
   }

   render() {
     return (
       <div>
         <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown} >
           <DropdownToggle caret color="info" className={'btn-rounded'}>Title Test
           </DropdownToggle>
           <DropdownMenu>            
             <DropdownItem >Follow</DropdownItem>
           </DropdownMenu>
         </ButtonDropdown>
       </div>   
     )
   }      
}

https://imgur.com/a/B7D9Oag“预期结果”

【问题讨论】：

意思是toggle {this.toggleDropdown} 没有=？
抱歉，这是我在堆栈上的拼写错误，但我已经修复了它，不幸的是，问题不是这个。

标签： javascript reactjs

【解决方案1】：

我会使用条件。也许像这样，在渲染中

if(dropdownOpen) {     
  var showDrop = ( 
  <DropdownMenu>            
   <DropdownItem >Follow</DropdownItem>
  </DropdownMenu>)
} else{ showDrop = null }

<ButtonDropdown onClick={() => this.toggleDropdown()}>
  <DropdownToggle caret color="info" className={'btn-rounded'}>
    Title Test
  </DropdownToggle>
    {showDrop}
</ButtonDropdown>

【讨论】：