인프런 커뮤니티 질문&답변
작성한 질문수
로그인인풋창에서 한글자적고나면 커서가 사라져요 ㅠ
해결된 질문
작성
·
253
답변 6
1
1
1
0
0
HyunJu Park
질문자
감사합니다 useInput 예요
import { useState, useCallback } from 'react';
export default (initialValue = null) => {
const [value, setValue] = useState(initialValue);
const handler = useCallback((e) => {
setValue(e.target.value);
}, []);
return [value, handler, setValue];
};
0
HyunJu Park
질문자
빠른 답변감사합니다!
key 속성은 안들어가있는데
이게 전체 코드인데 뭔가 잘못된부분이 있을까요,,??
import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { loginRequestAction } from '../reducers/user';
import styled from 'styled-components';
import { Form, Input, Button } from 'antd';
import Link from 'next/link';
import useInput from '../hooks/useInput';
const LoginForm = () => {
const dispatch = useDispatch();
const [id, onChangeId] = useInput('');
const [password, onChangePassWord] = useInput('');
// 스타일드 컴포넌트
const ButtonWrapper = styled.div`
margin-top: 10px;
`;
const FormWrapper = styled(Form)`
padding: 10px;
`;
const onsubmitForm = useCallback(() => {
dispatch(loginRequestAction({ id, password }));
}, [id, password]);
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="/signup">
<a>
<Button>회원가입</Button>
</a>
</Link>
</ButtonWrapper>
</FormWrapper>
);
};
export default LoginForm;