REACT_reactstrap Input Group

Input Group 패키지는 여러 개의 태그를 하나의 input 그룹으로 묶어 사용할 수 있도록 지원한다

 

- R045_ReactstrapInputGroup.js

import React, { Component } from 'react';
import {InputGroup, InputGroupAddon, InputGroupText, Input, Button} from 'reactstrap';

class R045_ReactstrapInputGroup extends Component {
    render() {
        return (
            <>
            <InputGroup>
            <Input placeholder="userid"/>
            <InputGroupAddon addonType="append">
                <InputGroupText>@reactmail.com</InputGroupText>
            </InputGroupAddon>
            </InputGroup>
            <InputGroup>
                <InputGroupAddon addonType="prepend">
                <button>버튼</button></InputGroupAddon>
                <Input/>
            </InputGroup>
            </>
        )
    }
}
export default R045_ReactstrapInputGroup;

 

☆ InputGroupAddon은 reactstrap 라이브러리에서 제공하는 컴포넌트로, 과거에는 입력 그룹에 텍스트나 버튼 등을 추가할 때 사용되었다. 그러나 reactstrap 8.x 버전 이후로 InputGroupAddon 컴포넌트는 더 이상 사용되지 않고, 대신 InputGroupText와 InputGroup 내부의 다른 요소들을 사용하는 방식으로 변경되었다

-  InputGroupAddon  →  InputGroupText로 변경

import React, { Component } from 'react';
import {InputGroup, InputGroupAddon, InputGroupText, Input, Button} from 'reactstrap';

class R045_ReactstrapInputGroup extends Component {
    render() {
        return (
            <>
            <InputGroup>
            <Input placeholder="userid"/>
                <InputGroupText addonType="append">@reactmail.com</InputGroupText>
            </InputGroup>
            <InputGroup>
                <InputGroupText addonType="prepend">
                <button>버튼</button>
                </InputGroupText>
                <Input />
            </InputGroup>
            </>
        )
    }
}
export default R045_ReactstrapInputGroup;

 

- App.js

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

import InputGroup from './R045_ReactstrapInputGroup'
import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

 

결과