-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
input 한글자 입력후 focus사라지는 현상
21.01.07 17:02 작성 조회수 5.67k
0
어...아래 에러는 해결했는데
로그인할때 input창에서 한글자 입력하면 focus를 잃어서 다시 입력하려면 input창을 클릭해야하는 현상이 발생하는데
이건 어디서 문제가 발생한 걸까요
제가 보이에는 ch3에 있는 코드랑 styled컴포넌트를 사용한거 제외하고는 동일해 보이거든요ㅠㅠ
import React, { useCallback } from "react";
import { Form, Input, Button } from "antd";
import Link from "next/link";
import styled from "styled-components";
import { useDispatch } from "react-redux";
import { loginAction } from "../reducers";
import useInput from "../hooks/useInput";
const ButtonWrapper = styled.div`
margin-top: 10px;
`;
const LoginForm = () => {
const dispatch = useDispatch();
const [id, onChangeId] = useInput("");
const [password, onChangePassword] = useInput("");
const onSubmitForm = useCallback(() => {
console.log(id, password);
dispatch(loginAction({ id, password }));
}, [id, password]);
const FormWrapper = styled(Form)`
padding: 10px;
`;
return (
<FormWrapper 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>
<ButtonWrapper>
<Button type="primary" htmlType="submit" loading={false}>
로그인
</Button>
<Link href="/singup">
<a>
<Button>회원가입</Button>
</a>
</Link>
</ButtonWrapper>
</FormWrapper>
);
};
export default LoginForm;
답변을 작성해보세요.
답변 5