41 lines
1.0 KiB
JavaScript
41 lines
1.0 KiB
JavaScript
'use client'
|
|
import React, { useRef, useState } from 'react'
|
|
import Select from 'react-select'
|
|
import '@/styles/_inputcommon.scss'
|
|
export default function ReactSelect() {
|
|
const selectOption = [
|
|
{ label: '김창수', value: '1' },
|
|
{ label: '류제영', value: '2' },
|
|
{ label: '정상연', value: '3' },
|
|
{ label: '안병근', value: '4' },
|
|
]
|
|
|
|
const ref = useRef()
|
|
|
|
const [select, setSelect] = useState('')
|
|
|
|
//isSearchable 자동완성 검색가능여부
|
|
//isClearable x버튼
|
|
|
|
const onSelectionChange = (key) => {
|
|
if (key) {
|
|
setSelect(key.value)
|
|
} else {
|
|
setSelect('')
|
|
}
|
|
}
|
|
return (
|
|
<div>
|
|
<h1 className="title">REACT-SELECT</h1>
|
|
<div className="input-content">
|
|
<div className="input-wrap">
|
|
<h1>REACT-SELECT</h1>
|
|
<div className="select-wrap">
|
|
<Select ref={ref} options={selectOption} onChange={onSelectionChange} isSearchable={false} placeholder="선택하세요" isClearable={true} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|