[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 객체를 넣어준다.

 

<Form ref={this.formRef}>

 

4. 여러가지 FormItem을 선언한다.

 

name 파라미터에 초기화에 사용할 키 값을 넣는다.

 

키 값이 중복되면 같이 지워지니 주의한다.

 

<FormItem
	name="staffName"
	className="selectItem">
	<Input placeholder="직원명을 입력해 주세요." className="override-input"></Input>
</FormItem>

 

 

🟡 5. 초기화 기능을 만든다. 🟡

 

생성한 ref 객체의 current 값을 setFieldsValue를 이용하여

 

FormItem의 name 파라미터로 선언한 key 기준으로 undefined 세팅을 진행한다.

 

setState와 유사하게 작성하면 된다.

 

render 밖에서 선언한다.

 

handleClear = () => {
	this.formRef.current.setFieldsValue({
		staffName: undefined,
		password: undefined,
		phoneNumber: undefined,
		memo: undefined,
		rank: undefined,
		auth: undefined,
	});
};

 

 

6. 초기화 버튼을 만든다.

 

onClick에 초기화 기능으로 만든 함수를 선언한다.

 

<Button className="clearBtn" onClick={this.handleClear}>
	초기화
</Button>

 

 

여담

 

기존에는 document.getElementById("name key 값").value = ""; 로 초기화 했었다.

 

document.getElementById("textareaInput").value = "";

 

text는 잘 초기화가 됐지만 select나 radio같은 요소들은 저 방법으로 초기화 되지 않았다.

 

그렇게 찾은 방법이 위 방법이다.

 

리액트에서는 위 방법이 보다 적절하다.