import React, { useCallback, useState } from 'react'
import { Button, Form, Input } from 'antd'
import Link from 'next/link'
const LoginForm = ({ setIsLoggedIn }) => {
const [id, setId] = useState('')
const [password, setPassword] = useState('')
const onChangeId = useCallback(
(e) => {
setId(e.target.value)
},
[]
)
const onChangePassword = useCallback(
(e) => {
setPassword(e.target.value)
},
[]
)
const onSubmitForm = useCallback(
() => {
console.log(id, password)
setIsLoggedIn(true)
},
[id, password]
)
return (
<Form onFinish={onSubmitForm}>
<div>
<label htmlFor="user-id">아이디</label>
<br />
<Input name="user-id" value={id} onChange={onChangeId} required />
</div>
<div>
<label htmlFor="user-password">비밀번호</label>
<br />
<Input
name="user-password"
type="password"
value={password}
onChange={onChangePassword}
required
/>
</div>
<div style={{ marginTop: 10 }}>
<Button type="primary" htmlType="submit" loading={false}>로그인</Button>
<Link href="/signup"><a><Button>회원가입</Button></a></Link>
</div>
</Form>
)
}
export default LoginForm
해당 페이지 입니다.
증상은 아이디 비밀번호 입력칸에 타이핑이 되지 않고 위 에러처럼 표시됩니다.