Properties

  2.   disabled: PropTypes.bool,
  3.   direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
  4.   group: PropTypes.bool,
  5.   isOpen: PropTypes.bool,
  6.   tag: PropTypes.string,
  7.   toggle: PropTypes.func
  8. };
  10. DropdownToggle.propTypes = {
  11.   caret: PropTypes.bool,
  12.   disabled: PropTypes.bool,
  13.   onClick: PropTypes.func,
  14.   'data-toggle': PropTypes.string,
  16. };

  1. <ButtonDropdown isOpen={isOpen} toggle={toggle}>
  2.   <Button id="caret" color="primary">{this.props.text}</Button>
  3.   <DropdownToggle caret color="primary" />
  4.   <DropdownMenu>
  5.     <DropdownItem header>Header</DropdownItem>
  6.     <DropdownItem disabled>Action</DropdownItem>
  7.     <DropdownItem>Another Action</DropdownItem>
  8.     <DropdownItem divider/>
  9.     <DropdownItem>Another Action</DropdownItem>
  10.   </DropdownMenu>
  11. </ButtonDropdown>

Button Dropdown - 图1

  1. import React from 'react';
  3. export default function Example () => {
  4.   return (
  5.     <UncontrolledButtonDropdown>
  6.       <DropdownToggle caret>
  7.         Dropdown
  8.       </DropdownToggle>
  9.       <DropdownMenu>
  10.         <DropdownItem header>Header</DropdownItem>
  11.         <DropdownItem disabled>Action</DropdownItem>
  12.         <DropdownItem>Another Action</DropdownItem>
  13.         <DropdownItem divider />
  14.         <DropdownItem>Another Action</DropdownItem>
  15.       </DropdownMenu>
  16.     </UncontrolledButtonDropdown>
  18. }