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