REACT_reactstrap Button Dropdown

Dropdown 패키지는 대표 메뉴를 클릭하면, 하위 메뉴 리스트가 표시되는 기능이다

이때 대표 메뉴를 누를 때마다 하위 메뉴 리스트를 번갈아가면서 표시, 미표시를 해야한다

이를 위해서는 현재 하위 메뉴 리스트 상태가 표시인지 미표시인지 대한 정보가 필요하다

 

- R037_ReactstrapDropdown.js

import React, { Component } from "react";
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

class R037_ReactstrapDropdown extends Component {
    constructor (props) {
        super(props);
        this.state = {
            dropdownOpen: false
        }
    }
    
    toggle = (e) => {
        this.setState({ dropdownOpen: !this.state.dropdownOpen});
    }

    render() {
        return(
            <ButtonDropdown isOpen = {this.state.dropdownOpen} toggle={this.toggle}> 
                <DropdownToggle caret>버튼 Dropdown</DropdownToggle>
                <DropdownMenu>
                    <DropdownItem header>헤더</DropdownItem>
                    <DropdownItem disabled>비활성화 버튼</DropdownItem>
                    <a href="http://example.com/">
                    <DropdownItem>example 사이트로 이동</DropdownItem>
                    </a>
                    <DropdownItem onClick={e => alert("Alert 버튼")}>Alert 버튼</DropdownItem>
                </DropdownMenu>
            </ButtonDropdown>
        )
    }
}
export default R037_ReactstrapDropdown;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactstrapDropdown from './R037_ReactstrapDropdown'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <ReactstrapDropdown/>
    </div>
  );
}

export default App;

 

결과