Question

我需要当我从“ 反应带 ”中的ButtonDropdown中单击DropdownItem时，不要关闭 DropdownMenu >。当我在 DropdownMenu 之外单击时，它将关闭。

我已经尝试通过状态控制我传入参数“ isOpen” ，并使用我在的“切换” 中发生的功能 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>   
     )
   }      
}

Jenkins X“预期结果”

Answer 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>

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

1 个答案: