상태 비저장 입력을 사용하여 React에서 사용자 지정 양식 만들기

소개

이런 것을 본 적이 있습니까?


이 기사에서는 이 문제를 해결하려고 노력할 것입니다. 시작하겠습니다!

문제

각 입력의 관리 상태로 큰 양식을 만드는 것은 지루한 작업입니다. 10개의 필드가 더 있는 양식을 상상해보세요 🤯


부모 요소에 입력 요소를 포함하고 단일 진실 소스 내에서 해당 상태를 관리할 수 있다면 어떨까요? 굉장할 것입니다. 부모 구성 요소를 만들 수 있습니다!

해결책

React 구성 요소를 만들고 호출하고Form 입력 요소를 자식으로 전달합니다. 회상하자면, 구성 요소의 자식은 자식 배열인 구성 요소의 소품children에 의해 액세스될 수 있다는 것을 알고 있습니다.


우리가 console.log 구성 요소의 각 자식을 Form 하면 다음과 같이 보입니다.


이제 JavascriptForm에 있는 Object 구성 요소의 출력이 필드 이름 및 해당 입력 값에 해당하는 키-값 쌍의 형태로 필요합니다.value 소품을 변경하고 요소의 onChange 소품을 다룰 수 있다면 우리의 임무는 완수될 것입니다!

하지만 잠깐... 매핑하는 동안 우리가 어떤 필드 이름에 있는지 어떻게 알 수 있습니까? 그리고 변경될 때 입력 데이터를 저장하는 위치 및 방법은 무엇입니까?

이 문제를 해결하기 위해 key라는 자식 요소에 추가 prop을 제공합니다(반응 요소의 또 다른 멋진 기본 prop은 사용을 확인합니다here. 여기서 필드 이름을 표시하기 위해 키를 사용합니다) .
또한 formData 구성 요소에 2개의 추가 소품( setFormData 및 Form )을 전달합니다.

import { useState } from "react";
import Form from "./Form";
import "./styles.css";

export default function App() {

  const [formData, setFormData] = useState(null)

  return (
    <div className="App">
      <Form setFormData={setFormData} formData={formData}>
        <input key='name' placeholder='Enter name' />
        <input key='email' placeholder='Enter email' />
        <input key='phoneNumber' placeholder='Enter phone' />
        <input key='address' placeholder='Enter address' />
      </Form>

      <button onClick={() => console.log(formData)}>Submit</button>
    </div>
  );
}

Form 구성 요소에서 children 배열을 매핑하고 props 필드를 변경하여 새 배열을 만듭니다.
요소의 value는 formData 변수에서 가져오고 onChange 함수는 (child.key에서 액세스하는) 키를 사용하여 필드의 값을 변경하고 formData를 통해 setFormData에 저장하는 다른 함수에 매핑됩니다. )

export default function Form({ children, formData, setFormData }) {

  const handleInputChange = (key, text) => {
    let newFormData = { ...formData }
    newFormData[key] = text
    setFormData(newFormData)
  }

  const mappedChildren = children.map(child => {
    return {
      ...child,
      props: {
        ...child.props,
        onChange: e => handleInputChange(child.key, e.target.value),
        value: formData ? formData[child.key] : ''
      }
    }
  })

  return (
    <section>
      {mappedChildren}
    </section>
  )
}

구성 요소가 완료되었습니다. 콘솔에서 로깅formData을 통해 작동 여부를 확인할 수 있습니다.




효과가있다!