SIR
목록으로
이전글 다음글

React Select 관련 질문드립니다.

세세균님
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 2,285
답변 2
목록
Copy 
<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 를 사용해서 할 수 있다는데 아직 해결방법을  찾지 못했습니다..

#그누보드5 #그누보드4 #frontend #react #typescript

답변 2개

Copy 
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>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

타입이 아닌 자바스크립트, 클래스가 아닌 함수형 기준으로 답변드립니다.

import {createRef, ...} from "react"; <- react를 import 할때 같이 불러와주세요.

useRef도 사용이 됩니다. 사용하는 사람이 결정하면 되는 문제라 제가 쓰는대로만 알려드릴게요.

export default로 구성 된 컴포넌트에서...

const selectRef = createRef();

select 내에서...

<select

...

ref={selectRef}

...

사용할 때는 selectRef.current.value 로 사용해주시면 됩니다.

샘플코드

Copy 
import {createRef, useEffect} from "react";

 

const Test = () => {

 

  const selectRef = createRef();

 

  useEffect(()=>{
    selectRef.current.value = '블라블라';
  },[]);

 

  return (<select

   ref={selectRef}

>
...옵션들
</select>)

}

 

export default Test;
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고