React의 동적 양식 필드

양식을 통해 사용자 입력을 허용하는 애플리케이션을 구축해 왔다면 일부 양식 필드를 동적으로 만들어야 할 필요성을 느꼈을 것입니다. 예를 들어 생성 중에 팀의 일부로 여러 구성원을 추가하는 등 다양한 이유가 있을 수 있습니다. 이런 상황에 처해 본 적이 없다면 이 게시물이 언젠가는 도움이 될 수도 있습니다.

전제 조건:

React Hooks 작업 지식

시스템에 설치된 npm

두 개의 입력 필드가 있는 간단한 양식을 사용하여 React의 동적 양식 필드를 설명할 것입니다. 하나는 이름용이고 다른 하나는 성용으로 사용자 데이터를 형성합니다. 이 두 필드는 고유하고 새 사용자 데이터를 허용할 수 있는 더 많은 필드를 만들기 위해 동적으로 복제됩니다.

시작하기

빠르게 시작하기 위해 우리는 Create React App 패키지를 사용하지만 우리가 진행할 단계는 기존 애플리케이션에 원활하게 통합될 수 있습니다.

아래 단계에 따라 새 React 앱을 만들고 앱 디렉토리로 이동한 다음 개발 모드에서 시작하세요.

npx create-react-app my-app
cd my-app
npm start

브라우저에서 보려면 http://localhost:3000을 여십시오.

일부 스타일링을 위해 Bootstrap을 설치합니다. 이 단계는 선택 사항이며 양식에 좋은 사용자 인터페이스를 제공하기 위해서만 여기에 포함됩니다. Bootstrap에 대한 지식은 필요하지 않습니다.

npm i bootstrap

심해 잠수

원하는 텍스트 편집기에서 프로젝트를 엽니다. App.js로 이동하여 콘텐츠를 아래 코드 스니펫으로 바꿉니다.

import React, { useState, Fragment } from "react";

import "bootstrap/dist/css/bootstrap.css";

const App = () => {

  return (
    <>
      <h1>Dynamic Form Fields in React</h1>
    </>
  )
}

export default App;

이는 양식 구성 요소를 구축할 기본 템플릿을 제공합니다.

React Hooks를 사용하여 다음과 같이 양식 입력 필드를 초기화합니다.

...

const App = () => {
  const [inputFields, setInputFields] = useState([
    { firstName: '', lastName: '' }
  ]);

...

}

...

위 스니펫에서 inputFields는 양식 필드를 나타내고 setInputFields는 이러한 양식 필드의 값을 설정하는 데 사용됩니다.

아래와 같이 App 구성 요소를 업데이트하여 양식 설정을 진행합니다.

const App = () => {
...

const handleSubmit = e => {
    e.preventDefault();
    console.log("inputFields", inputFields);
  };

return (
    <>
      <h1>Dynamic Form Fields in React</h1>
      <form onSubmit={handleSubmit}>
        <div className="form-row">
          {inputFields.map((inputField, index) => (
            <Fragment key={`${inputField}~${index}`}>
              <div className="form-group col-sm-6">
                <label htmlFor="firstName">First Name</label>
                <input
                  type="text"
                  className="form-control"
                  id="firstName"
                  name="firstName"
                  value={inputField.firstName}
                />
              </div>
              <div className="form-group col-sm-4">
                <label htmlFor="lastName">Last Name</label>
                <input
                  type="text"
                  className="form-control"
                  id="lastName"
                  name="lastName"
                  value={inputField.lastName}
                />
              </div>
              <div className="form-group col-sm-2">
                <button
                  className="btn btn-link"
                  type="button"
                >
                  -
                </button>
                <button
                  className="btn btn-link"
                  type="button"
                >
                  +
                </button>
              </div>
            </Fragment>
          ))}
        </div>
        <div className="submit-button">
          <button
            className="btn btn-primary mr-2"
            type="submit"
            onSubmit={handleSubmit}
          >
            Save
          </button>
        </div>
      </form>
    </>
  )

}

...

코드가 너무 많아 보이더라도 걱정하지 마세요. 검토하겠습니다. 양식이 제출될 때 반환된 값을 기록하는 기능handleSubmit이 있습니다. 여기서 우리는 단순히 콘솔에 로그인하지만 특정 사용 사례에 따라 필요한 모든 것에 여기에서 데이터를 사용할 수 있습니다. JavaScriptmap 함수는 양식 필드의 배열을 만드는 데 사용됩니다. Fragment React를 사용하면 DOM에 새 노드를 추가하지 않고도 자식 목록을 그룹화할 수 있습니다.

양식에 기능 추가

변경 사항 처리

이 시점에서 기본 UI가 완료되어 목표에 가까워지고 있지만 아직 기능은 없습니다. 소매를 걷어붙이고 기능에 대한 작업을 시작해 봅시다!

사용자 입력 작업을 처리하기 위해 변경 처리기를 포함하도록 입력 필드를 업데이트합니다. 아래 변경 사항을 참조하십시오.

...

  <input
...
   onChange={event => handleInputChange(index, event)}
  />

...

handleInputChange 함수가 존재하지 않습니다. App 바로 다음에 handleSubmit 구성 요소에 생성해 보겠습니다. 아래를 참조하십시오.

...
const handleInputChange = (index, event) => {
    const values = [...inputFields];
    if (event.target.name === "firstName") {
      values[index].firstName = event.target.value;
    } else {
      values[index].lastName = event.target.value;
    }

    setInputFields(values);
  };
...

위의 코드 스니펫에서 inputFields를 확산하고 해당 필드의 name 속성을 기반으로 입력 필드에 대한 간단한 검사를 수행합니다. 그런 다음 주어진 인덱스에 대한 값을 제공합니다. 인덱스는 이전에 사용한 map 함수에서 파생됩니다.

양식 필드 추가 및 제거

이제 흥미로운 부분이 나옵니다. handleInputChange 바로 뒤에 다음 코드 스니펫을 추가하여 양식 필드 추가 및 제거를 처리합니다.

...

  const handleAddFields = () => {
    const values = [...inputFields];
    values.push({ firstName: '', lastName: '' });
    setInputFields(values);
  };

  const handleRemoveFields = index => {
    const values = [...inputFields];
    values.splice(index, 1);
    setInputFields(values);
  };

...

이 두 가지 새 기능을 사용하려면 - 및 + 버튼을 업데이트하여 양식 필드를 추가하고 제거하는 클릭 핸들러를 포함하십시오.

...
              <div className="form-group col-sm-2">
                <button
                  className="btn btn-link"
                  type="button"
                  onClick={() => handleRemoveFields(index)}
                >
                  -
                </button>
                <button
                  className="btn btn-link"
                  type="button"
                  onClick={() => handleAddFields()}
                >
                  +
                </button>
              </div>
...

Aside: 양식 입력 값의 미리보기를 보려면 닫는 양식 태그 앞에 다음 코드 스니펫을 추가하십시오</form>:.

...
<br/>
<pre>
 {JSON.stringify(inputFields, null, 2)}
</pre>
...

자! 더 많은 양식 필드를 추가하려면 + 를 클릭하고 제거하려면 - 를 클릭하십시오. 기존 애플리케이션 또는 새 애플리케이션에서 이 기능을 구현할 수 있습니다.

시사:



이것을 팀과 무료로 공유하세요!

원래 게시 위치: https://codeisbae.com/dynamic-form-fields-in-react/