반응형
이메일 주소와 비밀번호를 입력하는 Form이 있는데 Enter 키를 눌러도 가입하기로 넘어가지 않는다
Form에서 onKeyPress 이벤트가 발생할 때 그 키가 Enter일 경우 onSignup() 가입하기 버튼이 동작하도록 하면 된다
// 입력한 키가 Enter일 경우 가입하기 버튼 클릭한 것과 동일한 동작 실행
const onCheckEnter = (e) => {
if(e.key === 'Enter') {
onSignup()
}
}
import React, { useState } from "react"
import { Form, Input, Button } from "antd"
const Signup = (props) => {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const onChangeEmail = (e) => {
setEmail(e.target.value)
}
const onChangePwd = (e) => {
setPassword(e.target.value)
}
const onCheckEnter = (e) => {
if(e.key === 'Enter') {
onSignup()
}
}
const onSignup = () => {
}
return (
<div>
<h1>회원가입</h1>
<Form onKeyPress={onCheckEnter}>
<Form.Item
label="이메일 주소:"
name="email"
rules={[{ required: true }]}
>
<Input value={email} onChange={onChangeEmail} />
</Form.Item>
<Form.Item
label="비밀번호:"
name="password"
rules={[{ required: true }]}
>
<Input.Password value={password} onChange={onChangePwd} />
</Form.Item>
<Form.Item>
<Button size="large" onClick={onSignup}>
가입하기
</Button>
</Form.Item>
</Form>
</div>
)
}
export default Signup
반응형
'React&React-Native > React' 카테고리의 다른 글
[#. React] React 기본 실행 3000 port 변경하기 (0) | 2021.07.08 |
---|---|
[#. React] react-scroll 이용해서 텍스트 클릭 시 원하는 영역으로 스크롤 이동하기 (0) | 2021.06.17 |
[#. React] React에서 file, json data를 같이 formData에 넣어서 REST API에 post 하기 (0) | 2021.06.07 |
[#. React] parent에서 버튼 클릭할 때마다 children에서 div 영역 생성하기 (2) | 2021.05.25 |
[#. React] React에서 token이 필요한 API 요청 시 header Authorization에 Bearer token 담아서 보내기 (0) | 2021.05.21 |