44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
'use client'
|
|
|
|
import React, { useRef, useState } from 'react'
|
|
import Select from 'react-select'
|
|
|
|
export default function ReactSelect(){
|
|
const selectOption = [
|
|
{ label: '김창수김창수김창수김창수김창수김창수김창수김창수김창수', value: '1' },
|
|
{ label: '敬称選択', value: '2' },
|
|
{ label: '敬称選択', value: '3' },
|
|
{ label: '敬称選択', value: '5' },
|
|
{ label: '敬称選択', value: '6' },
|
|
|
|
]
|
|
|
|
const ref = useRef()
|
|
|
|
const [select, setSelect] = useState('')
|
|
|
|
//isSearchable 자동완성 검색가능여부
|
|
//isClearable x버튼
|
|
|
|
const onSelectionChange = (key) => {
|
|
if (key) {
|
|
setSelect(key.value)
|
|
} else {
|
|
setSelect('')
|
|
}
|
|
}
|
|
|
|
return(
|
|
<Select
|
|
ref={ref}
|
|
className='react-select-custom'
|
|
classNamePrefix='custom'
|
|
options={selectOption}
|
|
onChange={onSelectionChange}
|
|
isSearchable={false}
|
|
placeholder="敬称選択"
|
|
isClearable={true}
|
|
// isDisabled={true}
|
|
/>
|
|
)
|
|
} |