React의 양식

대부분의 응용 프로그램에서는 특정 시점에서 사용자 입력을 받게 됩니다.

이제 간단한 로그인 양식을 만들어 보겠습니다.

function NewsLetterForm() {
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Enter your email address"
      />
      <input
        type="password"
        name="password"
        placeholder="Enter your password"
      />
      <button type="submit">Login</button>
    </form>
  )
}

이 양식을 제출하면 기본적으로 브라우저는 URL의 쿼리 매개변수로 양식 값을 사용하여 현재 URL에 GET 요청을 하고 전체 페이지를 다시 로드합니다.
http://localhost:3000/exampe1.html?email=bipin%40gmail.comevent.preventDefault() 메서드를 호출하여 이 동작을 방지할 수 있습니다.

function NewsLetterForm() {
  const handleSubmit = event => {
    event.preventDefault()
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Enter your email address"
      />
      <input
        type="password"
        name="password"
        placeholder="Enter your password"
      />
      <button type="submit">Login</button>
    </form>
  )
}

event 개체는 실제 DOM 이벤트가 아니지만 실제 DOM 이벤트처럼 보이고 작동합니다. event.nativeEvent 속성을 사용하여 기본 DOM 이벤트에 액세스할 수도 있습니다.

React does this to increase the performance of the Application.

입력 필드의 값에 액세스해 보겠습니다.

입력 값에 액세스하는 방법에는 여러 가지가 있습니다.

해당 인덱스를 통해: event.target.elements[0].value

이름 또는 id 속성으로 요소 개체를 통해: event.target.elements.email.value

function NewsLetterForm() {
  const handleSubmit = event => {
    event.preventDefault()
    const email = event.target.elements.email.value;
    const password = event.target.elements.password.value;
    alert(`Your email is ${email} and password is ${password}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Enter your email address"
      />
      <input
        type="password"
        name="password"
        placeholder="Enter your password"
      />
      <button type="submit">Submit</button>
    </form>
  )
}

실시예 1


다음 기준을 충족하도록 암호 필드의 유효성을 검사해 보겠습니다.

은 8자 이상이어야 합니다

.

은 대문자

를 포함해야 합니다.

에는 숫자

가 포함되어야 합니다.

에는 특수 문자

가 포함되어야 합니다.

위의 기능을 보관하려면 두 가지가 필요합니다.

입력 값을 저장하는 변수와 사용자가 입력 값을 변경할 때마다 변수 값을 업데이트하는 업데이터 기능.

변경 핸들러( onChange ).

React에는 초기 값을 취하고 배열을 반환하는 useState라는 후크(일종의 메서드)가 있습니다.

We are going to talk about hooks in the next series.

function Counter() {
  // password is variable and setPassword is updater function
  const [password, setPassword] = React.useState('')

  return null;
}

React에는 사용자가 입력 필드의 값을 변경할 때 발생하는 onChange라는 이벤트 핸들러가 있습니다.

function Counter() {
  // password is variable and setPassword is updater function
  const [password, setPassword] = React.useState('')
  const handleChange = event => setPassword(event.target.value)

  return (
    <input
      type="password"
      name="password"
      value={password}
      placeholder="Enter your password"
      onChange="{handleChange}"
    />
  )
}

실시예 2


이 기사를 통해 무언가를 배웠기를 바라며 의문점이 있으면 댓글을 남겨주세요. 귀하의 모든 질문에 기꺼이 답변해 드리겠습니다.

제 이름은 Bipin Rajbhar이고 QuikieApps의 소프트웨어 엔지니어입니다.

자원
The Beginner's Guide to React
Epic React