React Select 관련 질문드립니다.

React Select 관련 질문드립니다.

QA

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>
 
답변을 작성하시기 전에 로그인 해주세요.
전체 10,639
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT