분류 Reactjs

자신 만의 React 커스텀 훅 작성 (3)

컨텐츠 정보

  • 조회 341 (작성일 )

본문

// useRequiredFields.js
import { useState } from 'react'

function useRequiredFields(requiredIds) {
  // have all the required fields been filled?
  const [requirementsFilled, setRequirementsFilled] = useState(false)

  // keep an array of the field ids that have been filled
  const [fieldsFilled, setFieldsFilled] = useState([])

  // Handle any onChange events for any of the inputs
  function handleChange(event) {
    const { id, value } = event.target

    if (!fieldsFilled.includes(id) && value.length) {
      // The field hasn't previously been filled
      setFieldsFilled([...fieldsFilled, id])

      // Check if all the fields have been filled
      if (requiredIds.length - 1 === fieldsFilled.length) {
        setRequirementsFilled(true)
      }
    } else if (value.length === 0 && fieldsFilled.includes(id)) {
      // The fields previously was filled but now has been cleared
      const newFieldsFilled = fieldsFilled.filter(field => field !== id)
      setFieldsFilled([...newFieldsFilled])
      setRequirementsFilled(false)
    }
  }

  return [requirementsFilled, handleChange]
}


이제 양식 자체에서 논리를 추출하고 입력을 지우는 데 응답하는 더 나은 기능을 추가했습니다. "필수"의 논리와 그 기준을 충족하는 논리를 다시 살펴볼 시간이 있다면 이 코드를 변경하면 이 사용자 정의 후크를 적용하는 모든 입력 필드의 기능이 업데이트 됩니다.


커스텀 훅 사용 


반복 코드를 사용자 정의 React 후크로 추출 했으므로 이제 양식으로 돌아가서 새 기능을 적용 할 수 있습니다. 각 양식 섹션마다 입력 필드의 id를 useRequiredFields에 제공하면 됩니다. 후크는 후크의 내부 상태를 업데이트 하기 위한 onChange 핸들러 뿐만 아니라 모든 필드가 채워지면 부울 값을 리턴합니다. 

다시 한번, 여기에 많은 코드가 있으므로 변경된 내용에 대해 강조 표시된 줄에 주의하십시오.