REACT_reactstrap Button Group

Button Group 패키지는 비슷한 형태와 기능을 하는 버튼들을 그룹으로 관리할 수 있게 지원해준다

 

- R038_ReactstrapButtonGroup.js

import React, { Component } from "react";
import { Button,ButtonGroup } from 'reactstrap';

class R038_ReactstrapButtonGroup extends Component {
    constructor (props) {
        super(props);
        this.state = {number:10}
    }

    move = (type,e) => {
        if(type === 'Left') {
            this.setState({number: this.state.number -1})
        } else if (type === 'Right') (
            this.setState({number: this.state.number + 1})
        )
    }

    render() {
        return(
            <div style={{padding : "0px"}}>
                <ButtonGroup style={{padding : "0px"}}>
                    <Button onClick={e => this.move('Left')}>Left</Button>
                    <Button onClick={e => this.move('Middel')}>Middle</Button>
                    <Button onClick={e => this.move('Right')}>Right</Button>
                </ButtonGroup>
                <br/>{this.state.number}
            </div>
        )
    }
}
export default R038_ReactstrapButtonGroup;

 

- App.js

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

import ReactstrapButtonGroup from './R038_ReactstrapButtonGroup'
import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

결과

Left 버튼을 누르면 -1 , Right 버튼을 누르면 +1 이된다