React Select 관련 질문드립니다.
본문
<Select
onChange={handleSelect2}
options={example?.data.body.data.map((v) => {
return {
label: v.Name,
value: v.Code,
key: v.Code,
};
})}
placeholder="학생"
/>
Select 로 학생이름을 고르고 등록버튼이 있다는 가정하에 버튼을 클릭시 Select 값을 초기화하여 처음 렌더링 했을 때처럼placeholder 값을 보여주고 싶은데 방법 없을까요?
검색해보니 Ref 를 사용해서 할 수 있다는데 아직 해결방법을 찾지 못했습니다..
답변 2
타입이 아닌 자바스크립트, 클래스가 아닌 함수형 기준으로 답변드립니다.
import {createRef, ...} from "react"; <- react를 import 할때 같이 불러와주세요.
useRef도 사용이 됩니다. 사용하는 사람이 결정하면 되는 문제라 제가 쓰는대로만 알려드릴게요.
export default로 구성 된 컴포넌트에서...
const selectRef = createRef();
select 내에서...
<select
...
ref={selectRef}
...
사용할 때는 selectRef.current.value 로 사용해주시면 됩니다.
샘플코드
import {createRef, useEffect} from "react";
const Test = () => {
const selectRef = createRef();
useEffect(()=>{
selectRef.current.value = '블라블라';
},[]);
return (<select
ref={selectRef}
>
...옵션들
</select>)
}
export default Test;
const selectRef = useRef(null);
//...
<Select
ref={selectRef}
onChange={handleSelect2}
options={example?.data.body.data.map((v) => {
return {
label: v.Name,
value: v.Code,
key: v.Code,
};
})}
placeholder="학생"
/>
<button onClick={() => {
selectRef.current.setValue(null);
}}>등록</button>
답변을 작성하시기 전에 로그인 해주세요.
