2020.08.09 antd
203
작성한 질문수 1
import React, { useState } from 'react';
import AppLayout from "../components/AppLayout";
import Head from "next/head";
import { Form, Input, Checkbox, Button } from 'antd';
const Signup = () => {
const [id, setId] = useState('');
const [nick, setNick] = useState('');
const [password, setPassword] = useState('');
const [passwordCheck, setPasswordCheck] = useState('');
const [term, setTerm] = useState(false);
const [passwordError, setPasswordError] = useState(false);
const [termError, setTermError] = useState(false);
const onFinish= () => {
if (password !== passwordCheck) {
return setPasswordError(true);
}
if (!term) {
return setTermError(true);
}
console.log({
id,
nick,
password,
passwordCheck,
term,
});
};
const onChangeId = (e) => {
setId(e.target.value);
};
const onChangeNick = (e) => {
setNick(e.target.value);
};
const onChangePassword = (e) => {
setPassword(e.target.value);
};
const onChangePasswordChk = (e) => {
setPasswordError(e.target.value !== password);
setPasswordCheck(e.target.value);
};
const onChangeTerm = (e) => {
setTermError(false);
setTerm(e.target.checked);
};
return (
<>
<Head>
<title>NodeBird</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.css" />
</Head>
<AppLayout>
<Form onFinish={onFinish} style={{ padding: 10 }}>
<Form.Item
label={"아이디"}
name={"user-id"}
rules={[{ required: true, message: "Please input your user ID!"}]}
>
<Input name="user-id" value={id} required onChange={onChangeId} />
</Form.Item>
<Form.Item
label={"닉네임"}
name={"user-nick"}
rules={[{ required: true, message: "Please input your nickname!"}]}
>
<Input name="user-nick" value={nick} required onChange={onChangeNick} />
</Form.Item>
<Form.Item
label={"비밀번호"}
name={"user-password"}
rules={[{ required: true, message: "Please input your password!"}]}
>
<Input name="user-password" type={"password"} value={password} required onChange={onChangePassword} />
</Form.Item>
<Form.Item
label={"비밀번호 체크"}
name={"user-password-check"}
>
<Input name="user-password-check" type={"password"} value={passwordCheck} required onChange={onChangePasswordChk} />
{passwordError && <div style={{ color: 'red' }}>비밀번호가 일치하지 않습니다.</div>}
</Form.Item>
<Form.Item name={"user-term"}>
<Checkbox name={"user-term"} checked={term} onChange={onChangeTerm}>서비스 이용 동의</Checkbox>
{termError && <div style={{ color: 'red' }}>약관에 동의하셔야 합니다.</div>}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">가입하기</Button>
</Form.Item>
</Form>
</AppLayout>
</>
);
};
export default Signup;
답변 1
1
기존판 강좌는 antd 3버전으로 제작되어 4버전과는 사용법이 다릅니다. 특히 4버전에서 onSubmit 대신 onFinish로 바뀔 때 e.preventDefault()가 없어졌습니다.
next 10 이상에서는 redux dev tool 구동이 안되나요?
0
272
1
세션 갱신 문의 건
0
482
7
배포 진행 후 Highlight updates components render 표시
0
445
1
똑같은 기능을 하는 테이블
0
447
4
관계형
0
312
2
프론트 서버를 이용하지 않는경우
1
299
3
인피니트 스크롤링 사용시 오류
0
278
0
계속 이런에러가 떠서 해결하기는 했는데 어떤 의미인지 모르겠습니다.
0
432
2
req.user가 언제 생성되나요??
0
330
2
Cannot read property 'id' of null 에러
0
332
1
리트윗한 게시글 불러오는 sequelize
0
252
1
result.data에서 images인 이유
0
281
2
takeLatest에 대한 질문입니다.
1
342
2
프론트에서 express를 사용하지 않을때 동적라우팅
0
501
6
getInitialProps가 클라이언트에서 수행되는 이유?
0
258
1
리로드하면 팔로우 언팔로우 값이 초기화 되는 문제입니다.
0
445
2
스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다
0
585
2
할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3)
0
365
1
nodejs mvc 패턴
0
975
4
사용하고 보니, 람다 구성이 궁금합니다!
0
266
1
제로초님
0
445
1
새로고침 로그인 풀림 문제.
0
247
1
안녕하세요. 강의 너무 감사합니다
0
157
1
제로초님
0
170
1