useState 후크 사용 및 React.js에서 양식 작업.

양식은 인터넷의 근간입니다. 그것들이 없으면 웹 페이지 간에 정보를 전달하는 것이 매우 어려울 것입니다. 운 좋게도 React.js의 양식 작업은 매우 쉽습니다.

오늘 기능적 구성 요소와 useState 후크를 사용하여 기본 양식을 작성해 보겠습니다.

먼저 React에서 간단한 폼을 만들어 봅시다.

import React from 'react'

const Form = () => {
  return (
    <form>
      <h1> Our Form </h1>
      <label htmlFor="title">Title</label>
      <input type="text" name="title" id="title" />

      <label htmlFor="body">Body</label>
      <textarea name="body" id="body"></textarea>
      <input type="submit" value="Submit" />
    </form>
  )
}

export default Form

이것은 추악한 형태입니까? 예. 우리가 해야 할 일에 효과가 있습니까? 또한 그렇습니다.

React의 양식은 React 작업에 익숙하지 않은 경우 익숙한 것과 약간 다르게 작동합니다. React에서 양식 작업을 할 때 상태를 관리한 다음 해당 상태를 사용하여 양식을 채우는 것이 전부입니다.

이전에는 클래스 기반 구성 요소를 사용할 때 상태가 거의 내장되어 있었습니다. 그러나 이제 기능 구성 요소를 사용하고 useState 후크를 사용하여 기능 구성 요소에 상태를 가질 수 있습니다.

가장 먼저 해야 할 일은 React에서 useState 후크를 가져오는 것입니다.

import React, { useState } from 'react'

이제 상태를 유지하는 개체를 만듭니다. 이 구문은 약간 이상하게 보일 수 있지만 설명하겠습니다.

const Form = () => {
  const [formData, setFormData] = useState({
    title: "",
    body: ""
  })

....

여기서 우리는 상태 'formData'에 대한 변수를 설정하고 있으며 formData의 값을 변경할 수 있는 함수인 'setFormData'를 설정하고 있습니다.

상태 내에서 값을 변경해야 할 때마다 setFormData() 함수를 사용해야 합니다.

여기서는 '제목' 및 '본문' 키가 있는 개체에 기본값을 설정합니다. 우리는 물건을 사용할 필요가 없습니다. 우리는 이 작업을 쉽게 수행할 수 있었지만 작업을 더 쉽게 수행할 수 있기 때문에 객체를 사용하는 것을 선호합니다.

const [title, setTitle] = useState("")

const [body, setBody] = useState("")

React에서는 상태에서 양식의 값을 가져오므로 입력에 값을 설정해야 합니다.

<label htmlFor="title">Title</label>
<input value={formData.title} type="text" name="title" id="title" />
<label htmlFor="body">Body</label>
<textarea value={formData.body} name="body" id="body"></textarea>

입력을 입력하려고 하면 업데이트되지 않는다는 것을 알 수 있습니다. 왜 그런 겁니까? 잠시 생각해 보십시오. 값을 상태 개체와 동일하게 설정하면 상태 개체는 빈 문자열 몇 개에 불과합니다.

양식의 값을 업데이트하려면 상태 값을 업데이트해야 합니다. 그 방법은 다음과 같습니다.

상태를 입력 값으로 설정하는 onChange 함수를 추가할 것입니다.

방법은 다음과 같습니다.

<label htmlFor="title">Title</label>
<input onChange​={(e) => setFormData({...formData, title: e.target.value})} value={formData.title} type="text" name="title" id="title" />
<label htmlFor="body">Body</label>
<textarea onChange​={(e) => setFormData({...formData, body: e.target.value})}  value={formData.body} name="body" id="body"></textarea>

이 기능 중 하나를 실제로 살펴보고 이것이 무엇을 하는지 살펴보겠습니다.

onChange={(e) => setFormData({...formData, title: e.target.value})}

첫째, 이 함수는 입력 값이 변경될 때마다 호출됩니다. 무언가를 입력할 때마다 이 기능이 실행됩니다.

이는 이벤트(e)를 가져와 setFormData() 함수에 전달합니다. formData의 일부만 설정할 수 없으며 전체를 설정해야 합니다. 따라서 (…formData) 형식의 모든 것을 취하여 설정한 다음 키와 값 제목을 추가합니다: e.target.value.

이제 양식을 테스트하기 위해 값을 console.log해 보겠습니다. 양식에 handleSubmit() 함수를 추가합니다.

<form onSubmit​={handleSubmit}>

그런 다음 handleSubmit() 함수를 만듭니다.

const handleSubmit = (e) => {
    e.preventDefault()
    console.log(formData)

}

여기에서는 페이지를 로드한 다음 로그아웃하거나 데이터를 로드하는 기본 동작을 중지합니다.

그리고 거기 당신은 그것을 가지고 있습니다. React에서 useState 및 양식 작업의 기본 사항입니다. 이제 이것을 API에 연결하고 데이터와 함께 게시 요청을 보내기만 하면 됩니다.

웹 개발에 대해 자세히 알아보려면 .