Web ant-design(antd)에서 Modal 안에 컨트롤 데이타 초기화하는 방법.
페이지 정보
본문
React+Typescript+Antd를 사용해서 UI를 구현하고 있는데요. 이 때 특정 차트(Gantt, Pie or Line)에 데이타를 보여주기 위해 데이타 기간과 조건들을 선택해야 합니다. 그런데, Select 콘트롤에서 선택한 Option Item들이 모달을 닫고, 다시 열면 그대로 남아있는 문제가 있습니다. 구글에 검색 해보면 대부분 setState를 사용해야 한다고 되어 있는데요. onChnage 이벤트 핸들러에서 selectedOptions를 초기화해도 State가 업데이트 되지 않습니다. 디버깅 해보면 업데이트는 되는데요. Select 콘트롤의 Value는 갱신이 되지 않습니다.
Modal의 Life-cycle에서 Component의 useEffect가 처음 한번만 수행되고, 모달을 닫고 다시 열면 호출이 안됩니다. 그래서, 아래와 같이 모달의 "destroyOnClose" 속성을 "true"로 설정해야 합니다. 그러면, 모달을 다시 띄울 때 내부의 모든 정보들이 사라지고 초기화 됩니다.
<Modal
destroyOnClose={isDestroyOnClose}
title={conditionTitle}
open={isModalOpen}
onOk={onOk}
onCancel={onCancel}
>
이 내용을 몰라서 오전을 다 날렸네요-_-;
Antd의 Modal은 setState로 초기화가 안되니 위 내용을 참고 해보세요^^
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
추천0 비추천0
- 이전글React+Typescript - 서로 의존하는 드롭다운리스트. (Select relationships) 23.04.15
- 다음글Typescript에서 배열 비우는 방법. (Array Clear) 23.04.12
댓글목록
등록된 댓글이 없습니다.