signup.js 파일 <AppLayout>내에 회원가입 폼이 안보입니다.
341
작성한 질문수 12
antd 버전 문제 인가 싶어 모두 바꿔보았는데도 실행이 안되네요ㅜㅜㅜㅜㅜ
import React, { useState } from "react";
import AppLayout from "../components/AppLayout";
import Head from "next/head";
import { Form, Checkbox, Input, 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 onSubmit = () => {
e.preventDefault();
console.log({
id,
nick,
password,
passwordCheck,
term
});
};
const onChangeId = () => {
setId(e.target.value);
};
const onChangeNick = () => {
setnick(e.target.value);
};
const onChangePassword = () => {
setPassword(e.target.value);
};
const onChangePasswordCheck = () => {
setPasswordCheck(e.target.value);
};
const onChangeTerm = () => {
setTerm(e.target.value);
};
return (
<>
<Head>
<title>NodeBird</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.4/antd.css"
/>
</Head>
<AppLayout>
<Form onSubmit={onSubmit} style={{ padding: 10 }}>
<div>
<label htmlFor="user-id">아이디</label>
<br />
<Input name="user-id" value={id} required onChange={onChangeId} />
</div>
<div>
<label htmlFor="user-nick">닉네임</label>
<br />
<Input
name="user-nick"
value={nick}
required
onChange={onChangeNick}
/>
</div>
<div>
<label htmlFor="user-password">비밀번호</label>
<br />
<Input
name="user-password"
value={password}
required
onChange={onChangePassword}
/>
</div>
<div>
<label htmlFor="user-password-check">비밀번호 확인</label>
<br />
<Input
name="user-password-check"
value={passwordCheck}
required
onChange={onChangePasswordCheck}
/>
</div>
<div>
<Checkbox name="user-term" value={term} onChange={onChangeTerm}>
약관에 동의 하시겠습니까?
</Checkbox>
</div>
<div>
<Button type="primary" htmlType="submit">
가입하기
</Button>
</div>
</Form>
</AppLayout>
</>
);
};
export default Signup;
답변 3
0
AppLayout.js 파일입니다
import React from "react";
import Link from "next/link";
import {Menu, Input, Button } from "antd";
const { Search } = Input;
const { Item } = Menu;
const AppLayout = ({ children }) => {
return (
<div>
<Menu mode="horizontal">
<Item key="home">
<Link href="/">
<a>노드버드</a>
</Link>
</Item>
<Item key="profile">
<Link href="/profile">
<a>프로필</a>
</Link>
</Item>
<Item key="search">
<Search
placeholder="input search text"
onSearch={value => console.log(value)}
style={{ verticalAlign: "middle", width: 200 }}
></Search>
</Item>
</Menu>
<Link href="/signup">
<Button>회원가입</Button>
</Link>
</div>
);
};
export default AppLayout;next 10 이상에서는 redux dev tool 구동이 안되나요?
0
279
1
세션 갱신 문의 건
0
504
7
배포 진행 후 Highlight updates components render 표시
0
451
1
똑같은 기능을 하는 테이블
0
461
4
관계형
0
320
2
프론트 서버를 이용하지 않는경우
1
305
3
인피니트 스크롤링 사용시 오류
0
281
0
계속 이런에러가 떠서 해결하기는 했는데 어떤 의미인지 모르겠습니다.
0
438
2
req.user가 언제 생성되나요??
0
334
2
Cannot read property 'id' of null 에러
0
336
1
리트윗한 게시글 불러오는 sequelize
0
255
1
result.data에서 images인 이유
0
285
2
takeLatest에 대한 질문입니다.
1
344
2
프론트에서 express를 사용하지 않을때 동적라우팅
0
507
6
getInitialProps가 클라이언트에서 수행되는 이유?
0
263
1
리로드하면 팔로우 언팔로우 값이 초기화 되는 문제입니다.
0
449
2
스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다
0
587
2
할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3)
0
369
1
nodejs mvc 패턴
0
982
4
사용하고 보니, 람다 구성이 궁금합니다!
0
271
1
제로초님
0
449
1
새로고침 로그인 풀림 문제.
0
251
1
안녕하세요. 강의 너무 감사합니다
0
164
1
제로초님
0
175
1