본문 바로가기

antd2

[React] antd table에서 pagination시 rowSelection값 유지하기 개요antd table에서 pagination(페이지 이동)으로 인해 새 데이터셋을 뿌려주게 되면 이전 페이지에서 선택한 rowSelection 배열 값이 초기화된다. 유지하는 법에 대해 알아보자문제점1. 이전 페이지로 돌아갔을 때 선택한 idx정보를 얻을 수 없다.2. 체크 후 제출할 때 현재 페이지에 체크된 정보만 전달되게 된다. 해결책1. 전체 체크된 idx 정보를 저장할 map자료구조를 선언한다.2. 체크 이벤트 때마다 한 페이지의 체크된 리스트를 selectedRowKeys 파라미터로 받아와서 배열에 오버라이팅 한다.3. 체크 이벤트 때마다 2번의 배열을 1번의 배열에 오버라이팅 한다.4. 체크 후 제출할 때나 테이블의 checked UI를 보여줄 때 1번의 배열을 사용한다. 1번의 배열은 전체.. React 2021. 6. 1.
[React] antd form 초기화하기 리액트에서 antd로 form을 구성했을 때 내부 요소들을 버튼 클릭으로 초기화 하는 방법을 알아보자 1. React를 import 한다. import React from "react"; 2. HTML의 DOM 메소드 사용을 위해 ref 객체를 생성한다. 생성자에서 this.formRef = React.createRef(); 를 선언하면 된다. class 클래스명 extends Component { constructor(props) { super(props) this.formRef = React.createRef(); } } 3. antd의 Form을 선언할 때 ref 파라미터에 생성한 ref 객체를 넣어준다. 4. 여러가지 FormItem을 선언한다. name 파라미터에 초기화에 사용할 키 값을 넣는다.. React 2021. 4. 29.