[#. React] React Form에서 Enter 엔터키 눌렀을 때 버튼 클릭 이벤트 실행하기

 

 

 

 

 

 

 

 

 

이메일 주소와 비밀번호를 입력하는 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